Accordion

// src/components/patterns/accordion/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/accordion
additionalProperties: false
required:
  - id
  - items
properties:
  headline:
    type: string
  id:
    type: string
  items:
    type: array
    required:
      - headline
    items:
      type: object
      properties:
        headline:
          type: string
        open:
          type: boolean
        rte:
          $ref: /elements/rte
        media:
          $ref: /elements/media-template
        media_position:
          type: string
          enum:
            - left
            - right
            - top
            - bottom
  narrow:
    type: boolean

// src/components/patterns/accordion/mocks.yaml

$hidden: true
id: unique_id
$variants:
  - $name: default
    headline: Accordion Headline (optional)
    items:
      - headline: Only rte
        rte:
          $ref: /elements/rte
      - headline: Only image
        media:
          $ref: /elements/media-template
          is_portrait: false
          image:
            $tpl: elements/image
            width: 521
            height: 391
            src: https://via.placeholder.com/521x391
            alt: Alternative text
            id: 13
            sources:
              - width: 521
                height: 391
                srcset: https://via.placeholder.com/521x391
                media: '(max-width: 35.5625rem)'
              - width: 911
                height: 683
                srcset: https://via.placeholder.com/911x683
                media: '(min-width: 35.625rem) and (max-width: 59.9375rem)'
              - width: 1176
                height: 882
                srcset: https://via.placeholder.com/1176x882
                media: '(min-width: 60rem) and (max-width: 79.9375rem)'
              - width: 1176
                height: 882
                srcset: https://via.placeholder.com/1176x882
                media: '(min-width: 80rem)'
      - headline: Rte with right image
        rte:
          $ref: /elements/rte
        media:
          is_portrait: false
          image:
            $tpl: elements/image
            width: 521
            height: 391
            src: https://via.placeholder.com/521x391
            alt: Alternative text
            id: 14
            sources:
              - width: 521
                height: 391
                srcset: https://via.placeholder.com/521x391
                media: '(max-width: 35.5625rem)'
              - width: 911
                height: 683
                srcset: https://via.placeholder.com/911x683
                media: '(min-width: 35.625rem) and (max-width: 59.9375rem)'
              - width: 367
                height: 275
                srcset: https://via.placeholder.com/367x275
                media: '(min-width: 60rem) and (max-width: 79.9375rem)'
              - width: 367
                height: 275
                srcset: https://via.placeholder.com/367x275
                media: '(min-width: 80rem)'
        media_position: right
      - headline: Rte with left image
        rte:
          $ref: /elements/rte
        media:
          is_portrait: false
          image:
            $tpl: elements/image
            width: 521
            height: 391
            src: https://via.placeholder.com/521x391
            alt: Alternative text
            id: 15
            sources:
              - width: 521
                height: 391
                srcset: https://via.placeholder.com/521x391
                media: '(max-width: 35.5625rem)'
              - width: 911
                height: 683
                srcset: https://via.placeholder.com/911x683
                media: '(min-width: 35.625rem) and (max-width: 59.9375rem)'
              - width: 367
                height: 275
                srcset: https://via.placeholder.com/367x275
                media: '(min-width: 60rem) and (max-width: 79.9375rem)'
              - width: 367
                height: 275
                srcset: https://via.placeholder.com/367x275
                media: '(min-width: 80rem)'
        media_position: left
      - headline: Rte with image on the top
        rte:
          $ref: /elements/rte
        media:
          is_portrait: false
          image:
            $tpl: elements/image
            width: 521
            height: 391
            src: https://via.placeholder.com/521x391
            alt: Alternative text
            id: 16
            sources:
              - width: 521
                height: 391
                srcset: https://via.placeholder.com/521x391
                media: '(max-width: 35.5625em)'
              - width: 911
                height: 683
                srcset: https://via.placeholder.com/911x683
                media: '(min-width: 35.625em) and (max-width: 59.9375em)'
              - width: 1176
                height: 882
                srcset: https://via.placeholder.com/1176x882
                media: '(min-width: 60em) and (max-width: 79.9375em)'
              - width: 1176
                height: 882
                srcset: https://via.placeholder.com/1176x882
                media: '(min-width: 80em)'
        media_position: top
      - headline: Rte with image on the bottom
        rte:
          $ref: /elements/rte
        media:
          is_portrait: false
          image:
            $tpl: elements/image
            width: 521
            height: 391
            src: https://via.placeholder.com/521x391
            alt: Alternative text
            id: 17
            sources:
              - width: 521
                height: 391
                srcset: https://via.placeholder.com/521x391
                media: '(max-width: 35.5625em)'
              - width: 911
                height: 683
                srcset: https://via.placeholder.com/911x683
                media: '(min-width: 35.625em) and (max-width: 59.9375em)'
              - width: 1176
                height: 882
                srcset: https://via.placeholder.com/1176x882
                media: '(min-width: 60em) and (max-width: 79.9375em)'
              - width: 1176
                height: 882
                srcset: https://via.placeholder.com/1176x882
                media: '(min-width: 80em)'
        media_position: bottom
  - $name: Materials
    items:
      - headline: Über uns
        open: true
        materials:
          - $ref: /patterns/material#info
            quantity:
              children:
                attributes:
                  id: quantity1
              label:
                attributes:
                  for: quantity1
          - $ref: /patterns/material#info
            quantity:
              children:
                attributes:
                  id: quantity2
              label:
                attributes:
                  for: quantity2
          - $ref: /patterns/material#info
            quantity:
              children:
                attributes:
                  id: quantity3
              label:
                attributes:
                  for: quantity3
          - $ref: /patterns/material#info
            quantity:
              children:
                attributes:
                  id: quantity4
              label:
                attributes:
                  for: quantity4
      - headline: Meere
        materials:
          - $ref: /patterns/material#info
            quantity:
              children:
                attributes:
                  id: quantity5
              label:
                attributes:
                  for: quantity5
      - headline: Landwirtschaft
        materials:
          - $ref: /patterns/material#info
            quantity:
              children:
                attributes:
                  id: quantity6
              label:
                attributes:
                  for: quantity6
      - headline: Klimakrise
        materials:
          - $ref: /patterns/material#info
            quantity:
              children:
                attributes:
                  id: quantity7
              label:
                attributes:
                  for: quantity7
      - headline: Wälder
        materials:
          - $ref: /patterns/material#info
            quantity:
              children:
                attributes:
                  id: quantity8
              label:
                attributes:
                  for: quantity8
      - headline: Umwelt & Gesellschaft
        materials:
          - $ref: /patterns/material#info
            quantity:
              children:
                attributes:
                  id: quantity9
              label:
                attributes:
                  for: quantity9
      - headline: Frieden
        materials:
          - $ref: /patterns/material#info
            quantity:
              children:
                attributes:
                  id: quantity10
              label:
                attributes:
                  for: quantity10
      - headline: Mobilität
        materials:
          - $ref: /patterns/material#info
            quantity:
              children:
                attributes:
                  id: quantity11
              label:
                attributes:
                  for: quantity11
      - headline: Atomkraft
        materials:
          - $ref: /patterns/material#info
            quantity:
              children:
                attributes:
                  id: quantity12
              label:
                attributes:
                  for: quantity12
      - headline: Kohle
        materials:
          - $ref: /patterns/material#info
            quantity:
              children:
                attributes:
                  id: quantity13
              label:
                attributes:
                  for: quantity13
  - $name: narrow
    narrow: true
    headline: Häufige Fragen zu Geschenkspenden
    items:
      - headline: Elementüberschrift 1
        rte:
          $ref: /elements/rte
      - headline: Elementüberschrift 2
        rte:
          $ref: /elements/rte
      - headline: Elementüberschrift 3
        rte:
          $ref: /elements/rte
      - headline: Elementüberschrift
        rte:
          $ref: /elements/rte

// 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 }}</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 }}
        <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 }}
            <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>

{# 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>