About
The accordion component expands/contracts a panel of content.
Alternatives
<details><summary> element (Alloy) is a great alternative for dead-simple browser-native expandable FAQ’s.
Accessibility
2019-01-18: This module hasn’t been tested with assistive tech, there may be better code out there.
Requirements
The generated ID must be unique to the whole page so that you can link to specific accordion items, and also so the ID’s work when JS is not available.
Issues
Examples
A good semantically correct example: a button containing text and an SVG icon (side by side), being inside the heading (accordion__title).
The accordion__item groups the head and body with a role="region" and an optional styling hook if needed.
Body of first accordion
Body of second accordion
Body of third accordion
<section class="c-accordion" data-accordion data-active-indexes="['acc_id-1']" data-active-in-active="true">
<div class="c-accordion__item" role="region">
<div class="c-accordion__head" data-accordion-control="'acc_id-1'">
<h3 id="acc_id-1" class="c-accordion__title" data-ng-non-bindable>
<button class="c-accordion__button">
<span class="c-accordion__buttontext">Title of first accordion</span>
<svg class="c-icon c-icon--accordionToggle" aria-hidden="true">
<g class="c-icon--down"><use xlink:href="/assets/icons/symbols.svg#icon--arrow-down"></use></g>
<g class="c-icon--up"><use xlink:href="/assets/icons/symbols.svg#icon--arrow-up"></use></g>
</svg>
</button>
</h3>
</div>
<div data-accordion-panel="'acc_id-1'">
<div class="c-accordion__body" data-ng-non-bindable>
<div>Body of first accordion</div>
</div>
</div>
</div>
<div class="c-accordion__item" role="region">
<div class="c-accordion__head" data-accordion-control="'acc_id-2'">
<h3 id="acc_id-2" class="c-accordion__title" data-ng-non-bindable>
<button class="c-accordion__button">
<span class="c-accordion__buttontext">Title of second accordion</span>
<svg class="c-icon c-icon--accordionToggle" aria-hidden="true">
<g class="c-icon--down"><use xlink:href="/assets/icons/symbols.svg#icon--arrow-down"></use></g>
<g class="c-icon--up"><use xlink:href="/assets/icons/symbols.svg#icon--arrow-up"></use></g>
</svg>
</button>
</h3>
</div>
<div data-accordion-panel="'acc_id-2'">
<div class="c-accordion__body" data-ng-non-bindable>
<div>Body of second accordion</div>
</div>
</div>
</div>
<div class="c-accordion__item" role="region">
<div class="c-accordion__head" data-accordion-control="'acc_id-3'">
<h3 id="acc_id-3" class="c-accordion__title" data-ng-non-bindable>
<button class="c-accordion__button">
<span class="c-accordion__buttontext">Title of third accordion</span>
<svg class="c-icon c-icon--accordionToggle" aria-hidden="true">
<g class="c-icon--down"><use xlink:href="/assets/icons/symbols.svg#icon--arrow-down"></use></g>
<g class="c-icon--up"><use xlink:href="/assets/icons/symbols.svg#icon--arrow-up"></use></g>
</svg>
</button>
</h3>
</div>
<div data-accordion-panel="'acc_id-3'">
<div class="c-accordion__body" data-ng-non-bindable>
<div>Body of third accordion</div>
</div>
</div>
</div>
</section>JS - Parameters
- param - defaults: true - lorem ipsum sit dolor