Accordion
This accordion component works without JavaScript by using multiple detail and summary elements. It therefore does not behave like a normal accordion, but instead multiple entries could be open at the same time.
If JavaScript is enabled, the behavior will be enhanced and the component behaves like a normal accordion.
Information
- Folder
src/components/patterns/accordion
Files
Schema
Mocks
Template
// src/components/patterns/accordion/accordion.twig
{{ attach_library("circle_dot/pattern-accordion") }}
{% set name = "Accordion-" ~ id %}
<div class="Accordion">
{% if heading %}
<div class="Accordion-heading">
{{ heading }}
</div>
{% endif %}
{% for item in items %}
<div class="Accordion-item">
{% include "@patterns/accordion/accordion-item/accordion-item.twig" with item|merge({name: name}) only %}
</div>
{% endfor %}
</div>