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
<div class="Accordion js-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 only %}
</div>
{% endfor %}
</div>
Error: can't resolve reference /patterns/accordion/accordion-item from id /patterns/accordion