
<$content.headerElementType>
  <button class="sol-expandable__header" aria-expanded="false">
    <span>$!content.name</span>
  </button>
</$content.headerElementType>

<script>
svDocReady(function() {
  const headerElement = document.querySelector('${content.domSelector} .sol-expandable__header');
  const contentElement = document.querySelector('${content.domSelector} .sol-expandable > .sv-decoration-content');
  const activeClass = 'sol-expandable__header--active';

  const toggleExpandableBox = function() {
    headerElement.classList.toggle(activeClass);
    headerElement.setAttribute('aria-expanded', !(headerElement.getAttribute('aria-expanded') === 'true'));

    $svjq(contentElement).slideToggle(150);
  }

  const init = function() {
    headerElement.setAttribute('aria-controls', '${content.id}-content');
    contentElement.setAttribute('id', '${content.id}-content');

    headerElement.addEventListener("click", toggleExpandableBox);

    contentElement.style.display = 'none';
    headerElement.setAttribute('aria-expanded', 'false');

    if (!$content.isOnline) {
      toggleExpandableBox();
    }

    if (window.location.hash && document.querySelector('${content.domSelector}').querySelector(window.location.hash)) {
      // Scrolls to expandable box and open it if user click on anchar link from other page
      toggleExpandableBox();
      headerElement.scrollIntoView({behavior: "smooth"});
    }

    window.addEventListener("hashchange", function(event){
      // Scrolls to expandable box and open it if user click on anchar link on same page
      if (window.location.hash && document.querySelector('${content.domSelector}').querySelector(window.location.hash)) {
        toggleExpandableBox();
        headerElement.scrollIntoView({behavior: "smooth"});
      }
    });
  };
  init();
});

</script>
