<section class="block block-faq-1">
  <div class="container">
  <div class="destination" id="{% t section.id %}"></div>
    <div class="columns">
      <div class="column">
        <h2><span class="light center">{% t section.headline %}</span></h2>
        {% for faq_item in section.faq_items %}
        <button class="collapsible">{% t faq_item.question %}</button>
        <div class="content faq-item">
          <p>{% t faq_item.answer %}</p>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
  </div>
</section>

<script>
  let coll = document.getElementsByClassName("collapsible");
  let i;

  for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function () {
      this.classList.toggle("open");
      let content = this.nextElementSibling;
      if (content.style.maxHeight) {
        content.style.maxHeight = null;
        content.style.paddingTop = "0px";
        content.style.paddingBottom = "0px";
        content.style.marginTop = "0px";
        content.style.marginBottom = "0px";
      } else {
        content.style.maxHeight = content.scrollHeight + 20 + "px";
        content.style.paddingTop = "10px";
        content.style.paddingBottom = "10px";
        content.style.marginTop = "10px";
        content.style.marginBottom = "10px";
      }
    });
  }
</script>