block-irma-faq.html 1.29 KB
Newer Older
Hanna Schraffenberger's avatar
Hanna Schraffenberger committed
1
2
<section class="block block-faq-1">
  <div class="container">
Hanna's avatar
Hanna committed
3
    <div class="destination" id="{% t section.id %}"></div>
Hanna Schraffenberger's avatar
Hanna Schraffenberger committed
4
    <div class="columns">
Hanna Schraffenberger's avatar
Hanna Schraffenberger committed
5
      <div class="column">
Rowan Goemans's avatar
Rowan Goemans committed
6
        <h2><span class="light center">{% t section.headline %}</span></h2>
Hanna Schraffenberger's avatar
Hanna Schraffenberger committed
7
        {% for faq_item in section.faq_items %}
Rowan Goemans's avatar
Rowan Goemans committed
8
        <button class="collapsible">{% t faq_item.question %}</button>
Hanna Schraffenberger's avatar
Hanna Schraffenberger committed
9
        <div class="content faq-item">
Rowan Goemans's avatar
Rowan Goemans committed
10
          <p>{% t faq_item.answer %}</p>
Hanna Schraffenberger's avatar
Hanna Schraffenberger committed
11
        </div>
Hanna Schraffenberger's avatar
Hanna Schraffenberger committed
12
        {% endfor %}
Hanna Schraffenberger's avatar
Hanna Schraffenberger committed
13
      </div>
Hanna Schraffenberger's avatar
Hanna Schraffenberger committed
14
15
    </div>
  </div>
16
17
18
19
20
</section>

<script>
  let coll = document.getElementsByClassName("collapsible");
  let i;
Hanna Schraffenberger's avatar
Hanna Schraffenberger committed
21

22
  for (i = 0; i < coll.length; i++) {
Hanna Schraffenberger's avatar
Hanna Schraffenberger committed
23
24
    coll[i].addEventListener("click", function () {
      this.classList.toggle("open");
25
      let content = this.nextElementSibling;
Hanna Schraffenberger's avatar
Hanna Schraffenberger committed
26
      if (content.style.maxHeight) {
Hanna Schraffenberger's avatar
Hanna Schraffenberger committed
27
        content.style.maxHeight = null;
Hanna Schraffenberger's avatar
test    
Hanna Schraffenberger committed
28
29
        content.style.paddingTop = "0px";
        content.style.paddingBottom = "0px";
Hanna Schraffenberger's avatar
test    
Hanna Schraffenberger committed
30
31
        content.style.marginTop = "0px";
        content.style.marginBottom = "0px";
32
      } else {
Hanna Schraffenberger's avatar
test    
Hanna Schraffenberger committed
33
        content.style.maxHeight = content.scrollHeight + 20 + "px";
Hanna Schraffenberger's avatar
test    
Hanna Schraffenberger committed
34
        content.style.paddingTop = "10px";
Hanna Schraffenberger's avatar
test    
Hanna Schraffenberger committed
35
36
37
        content.style.paddingBottom = "10px";
        content.style.marginTop = "10px";
        content.style.marginBottom = "10px";
Hanna Schraffenberger's avatar
Hanna Schraffenberger committed
38
      }
39
40
    });
  }
Hanna's avatar
Hanna committed
41
</script>