Accordion
The accordion.
This uses Scot Ohara' accessible accordion.
This github page has some good docs:
https://github.com/scottaohara/a11y_accordions
All data-aria-accordion-
items are required by the js.
The js lives in the libraries/a11y-accordion folder.
Be sure to test all changes in html. Inserting html wrappers
is known to break the a11y_accordions
plugin.
Qui ipsorum lingua Celtae, nostra Galli appellantur.
Morbi odio eros, volutpat ut pharetra vitae, lobortis sed nibh.
- Markup Details
-
{{ attach_library('goizueta_theme/accordion') }} {# Preserve the Drupal attributes if they're available. #} {% set attributes = attributes ? attributes.addClass('accordion-container') : ' class="accordion-container"' %} <section {{ attributes|raw }}> {% block heading %} {% include '@components/heading/heading.twig' with { "heading" : accordion.heading } only %} {% endblock %} <div class="accordion" data-aria-accordion="" {% if accordion.first_open %} data-constant=""{% endif %}> {% for item in accordion.accordion_items %} <h3 data-aria-accordion-heading="" class="accordion__heading"> <button type="button" id="{{ item.id}}_trigger" class="accordion__trigger"> {{ item.title }} </button> </h3> <div data-aria-accordion-panel="" id="{{ item.id }}" class="accordion__panel"> {{ item.body }} </div> {% endfor %} </div> </section>