block-faq-1.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="{{ 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">
Hanna Schraffenberger's avatar
Hanna Schraffenberger committed
6
        <h2><span class="light center">{{ section.headline }}</span></h2>
Hanna Schraffenberger's avatar
Hanna Schraffenberger committed
7
8
9
10
        {% for faq_item in section.faq_items %}
        <button class="collapsible">{{ faq_item.question }}</button>
        <div class="content faq-item">
          <p>{{ 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>
Hanna Schraffenberger's avatar
Hanna Schraffenberger committed
16
  </div>
17
18
19
20
21
</section>

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

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