accordion

// src/components/patterns/accordion/accordion.html.twig

<div class="Accordion js-Accordion{% if not as_element %} Accordion--component u-container{% endif %}{% if narrow %} Accordion--narrow u-grid{% endif %}" id="Accordion-{{ id }}">
  <div class="Accordion-contentHolder">
    {% if headline %}
      <h2 class="Accordion-headline">{{ headline|german_quotes }}</h2>
    {% endif %}
    {% for item in items %}
      {% set controls = "section_" ~ id ~ "_" ~ loop.index %}
      {% set region = "accordion_" ~ id ~ "_" ~ loop.index %}
      <h3 class="Accordion-button js-Accordion-itemHeadline u-typo-headline6">
        {{ item.headline|german_quotes }}
        <template class="js-Accordion-buttonTemplate">
          <button aria-expanded="{{ item.open ? 'true' : 'false' }}" class="js-Accordion-button Accordion-button Tracking--accordionButton" aria-controls="{{ controls }}" id="{{ region }}" type="button">
            {{ item.headline|german_quotes }}
            <span class="Accordion-icon">
            {% include "@elements/icon/icon.html.twig" with {name: "chevron"} only %}
          </span>
        </button>
      </template>
    </h3>
    <section id="{{ controls }}" aria-labelledby="{{ region }}" class="Accordion-content js-Accordion-content{% if item.media and item.media_position %} Accordion-content--{{ item.media_position }}Image{% endif %}{{ item.open ? ' is-open' : '' }}">
      <div class="Accordion-innerContent js-Accordion-innerContent{% if item.materials %} Accordion-innerContent--materials{% endif %}">
        {% if item.media %}
          {% include "@elements/media-template/media-template.html.twig" with item.media|merge({class: "Accordion-media"}) only %}
        {% endif %}
        {% if item.rte %}
          {% include "@elements/rte/rte.html.twig" with item.rte|merge({class: "Accordion-rte"}) only %}
        {% endif %}
        {% if item.materials %}
          {% for material in item.materials %}
            {% include "@patterns/material/material.html.twig" with material|merge({
              class: "Accordion-material",
              as_element: true
            }) only %}
          {% endfor %}
        {% endif %}
      </div>
    </section>
    {% endfor %}
  </div>
</div>

{# To hide the content as fast as possible if javascript is enabled in the browser #}
<script>
  document.querySelectorAll("#Accordion-{{ id }} .js-Accordion-content").forEach((el) => {
    el.style.height = "0";
  });
</script>