irma-website/_includes/block-faq-1.html

<section class="block block-faq-1">
  <div class="container">
    <div class="columns">
      <div class="column">
        <h2><span class="light center">{{ section.headline }}</span></h2>
        {% for faq_item in section.faq_items %}
        <button class="collapsible">{{ faq_item.question }}</button>
        <div class="content faq-item">
          <p>{{ 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";
      } else {
        content.style.maxHeight = content.scrollHeight + 30 + "px";
        content.style.paddingTop = "10px";
        content.style.paddingBottom = "20px";
      }
    });
  }
</script>