patterns_jinja/components/accordion/accordion.html

Window sizes

Template source
Template config
Template docs

<div class="accordion" data-accordion>
    {% for accordion in accordions %}
        <div class="accordion__panel" data-accordion-panel>
            <h3 class="accordion__title heading heading--4">
                <button class="accordion__toggle" type="button" data-accordion-toggle aria-pressed="true" aria-expanded="true" aria-controls="{{ id_prefix }}-content-{{ loop.index }}">
                    <span class="accordion__title-inner">{{ accordion.title }}</span>
                    {% set name="chevron-down" %}
                    {% set classname="accordion__icon" %}
                    {% include "patterns_jinja/components/icons/icon.html" %}
                </button>
            </h3>
            <div id="{{ id_prefix }}-content-{{ loop.index }}" class="accordion__content" data-accordion-content>
                <p>{{ accordion.description }}</p>
            </div>
        </div>
    {% endfor %}
</div>

context:
  id_prefix: test
  accordions:
    - title: Title A (Jinja)
      description: Description A. Ask for help.
    - title: Title B
      description: Description B. Ask for help.
    - title: Title C
      description: Description C. Ask for help.
    - title: Title D
      description: Description D. Ask for help.

Accordion (Jinja)

The accordion is a good example of a pattern library component. This one uses Jinja.