index.html

---
---

<section class="faq">
  <div class="accordion" id="accordionFaq">
    <div class="card">
    {% assign sorted = site.faq | where:"lang",site.active_lang | sort: 'weight' | reverse %}

    {% for item in sorted %}
      {% assign question = item.path | replace:'_faq/','' | replace:'en/','' | replace:'.html','' | replace:'.md','' %}
      <div class="card-header" id="heading{{ forloop.index }}">
        <h5 class="mb-0">
          <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse{{ forloop.index }}" aria-expanded="true" aria-controls="collapse{{ forloop.index }}" data-slug="{{ item.anchor }}">
            {{question}}
          </button>
        </h5>
      </div>

      <div id="collapse{{ forloop.index }}" class="collapse {% if forloop.last == true %}{{ "collapse-item-last" }}{% endif %}" aria-labelledby="heading{{ forloop.index }}" data-parent="#accordionFaq">
        <div class="card-body">
          {{ item | markdownify }}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

<script>
  //init collapse state according to URL #param
  var currentURL = window.location.href;
  if (currentURL.indexOf("#") > -1)
  {
    var slug = currentURL.substr(currentURL.indexOf("#")+1);
    var toUnCollapse = document.querySelector("button[data-slug="+slug+"]");
    var toUnCollapseTarget = toUnCollapse.getAttribute('data-target');
    document.querySelector(toUnCollapseTarget).classList.add('show');
  
    var sectionContainer = document.querySelector('section.content');
    window.scrollTo({
      left: 0,
      top: toUnCollapse.offsetTop + document.querySelector('header').offsetHeight,
      behavior: 'smooth'
    });
    //console.log("scrolled to");
    //console.log(toUnCollapse.offsetTop + document.querySelector('header').offsetHeight);
  }

  //handles button click and append/remove slug to URL
  var buttons = document.querySelectorAll("button.btn-link");
  buttons.forEach((button) => {
    button.addEventListener("click", function(e) 
    {
      //wait for the animation to complete
      setTimeout(() => {  
        if( this.getAttribute("aria-expanded") == "true" )
        {
          var appendix = "#" + e.target.dataset.slug;
          window.history.replaceState(null, null, appendix);
        }
        else
        {
          var loc = window.location;
          window.history.pushState("", document.title, loc.pathname + loc.search);
        }
        
      }, 500);

    });
  });
</script>