Collapsible: Default

// ES5

'use strict';

(function () {
  // Get all the <h4> headings
  var headings = document.querySelectorAll('.js-collapsible-title');

  function isHTML(str) {
  var a = document.createElement('div');
  a.innerHTML = str;

  for (var c = a.childNodes, i = c.length; i--; ) {
    if (c[i].nodeType == 1) return true; 
  }

  return false;
}


  Array.prototype.forEach.call(headings, function (heading) {
    // Give each <h4> a toggle button child
    // with the SVG plus/minus icon
    
    // heading.innerHTML = '<button class="c-collapsible__button" type="button" data-opens-text="apri" data-closes-text="chiudi" aria-expanded="false">' + heading.innerHTML + '<svg class="arrow-down" viewBox="0 0 24 24"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path></svg><svg class="arrow-up" viewBox="0 0 24 24"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" ></path></svg></button>';

    var headingcontent = heading.innerHTML;

    if ((isHTML(headingcontent)) && ($(headingcontent).is('button'))) {
      //console.log("continene html button");
      // Checks if the string  contains HTML and if it has already been converted to a button
      // (ie. in Endurance CMS pages)
      // and prevent double code injection
    } else {
      // console.log("no html button");
      // injects toggle button 
      heading.innerHTML = '<button class="c-collapsible__button" type="button" data-opens-text="apri" data-closes-text="chiudi" aria-expanded="false">' + headingcontent + '<svg class="arrow-down" viewBox="0 0 24 24"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path></svg><svg class="arrow-up" viewBox="0 0 24 24"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" ></path></svg></button>';
    };


    // Function to create a node list 
    // of the content between this <h4> and the next
    var getContent = function getContent(elem) {
      var elems = [];
      while (elem.nextElementSibling && elem.nextElementSibling.tagName !== 'p.js-collapsible-title') {
        elems.push(elem.nextElementSibling);
        elem = elem.nextElementSibling;
      }

      // Delete the old versions of the content nodes
      elems.forEach(function (node) {
        node.parentNode.removeChild(node);
      });

      return elems;
    };

    // Assign the contents to be expanded/collapsed (array)
    var contents = getContent(heading);

    // Create a wrapper element for `contents` and hide it
    var wrapper = document.createElement('div');
    wrapper.classList.add("o-collapsible__content");
    wrapper.hidden = true;

    // Add each element of `contents` to `wrapper`
    contents.forEach(function (node) {
      wrapper.appendChild(node);
    });

    // Add the wrapped content back into the DOM 
    // after the heading
    heading.parentNode.insertBefore(wrapper, heading.nextElementSibling);

    // Assign the button
    var btn = heading.querySelector('button');

    btn.onclick = function () {
      // Cast the state as a boolean
      var expanded = btn.getAttribute('aria-expanded') === 'true' || false;

      // Switch the state
      btn.setAttribute('aria-expanded', !expanded);
      // Switch the content's visibility
      wrapper.hidden = expanded;

    };

  });

  // gestione apertura collapsible in caso di match tra url e id
  // wrapper dell'collapsible 
  var collapsibleElem = $('.o-collapsible');

  // iterazione dei vari collapsible in pagina
  $(collapsibleElem).each(function (index) {

    collapsibleBtn = $(this).find('.c-collapsible__button');
    collapsibleTitle = $(this).find('.js-collapsible-title'),
      titleId = $(collapsibleTitle).attr('id'),
      indexString = $(location).attr('href'),
      content = $(this).find('.o-collapsible__content');


    if (Array.prototype.includes) {
      // se l'url contiene l'id del collapsible ed ha una lunghezza maggiore di 0 
      if (indexString.includes(titleId) && titleId.length > 0) {

        // imposta come true l'attributo aria-expanded
        $(collapsibleBtn).attr('aria-expanded', true);

        // rimuovi l'attributo hidden dal contenuto espandibile
        $(content).removeAttr('hidden');

        // scrolla la pagina fino al collapsible
        $('html, body').animate({
          scrollTop: $(this).offset().top - 100
        }, 2000);
      }
    }

  })

})();