Accordion

This is the deprecated version of the Accordion. The Accordion was refactored to improve accessibility in v15.

Before using this component, you might want to read our article about Accordions first. Please use the code samples below, not the generated code! The component adds a close button into the structure that isn't required in the initial markup.

Note: Ensure all ID's are unique on buttons and panels as this is required for accessibility

Simple accordion

Single open accordion

Use data-single-focus="true" to only allow one accordion to be open at a time.

Opened accordion

You can set an accordion to be opened by default by adding the accordion__visible class to the li element.

<li class="accordion__visible">...</li>

Nested accordion

You can nest an accordion inside another accordion.

Linked accordion

You may want an item in the accordion to link to another page. You can do this by changing the accordion__title from a span to an a element.

Alternate accordion

Use the class accordion--alt to choose a different theme.