Skip to Main Content


About Accordions

Accordions are a great way to arrange and display a high volume of categoric information. They provide the opportunity to include a title, subtitle, and content. The content area is flexible and is a great way to display copy, media, code, etc. It's possible to change the colour of the trigger using the background attribute. Alternatively, you can set the alt property on the accordion group to automatically alternate accordion colours between white and the variable you've selected.

More Info   See Examples   Changelog

Accordion Accessibility

A description of how this component is accessible is on its way!

Code Snippet

Detailed Information

<div data-c-accordion-group="(alt)"></div>

The group attribute is used to define a group of accordions and is required even in the event that a single accordion exists. The alt argument can be used to force the accordion group to alternate between white and the assigned colour set in the variable $clone-accordion-alternating-background-colour. If alt is omitted you can use data-c-background to assign a custom background colour to the data-c-accordion-trigger element.

<div data-c-accordion></div>

The accordion attribute defines a single accordion within the group.

<div data-c-accordion-trigger></div>

The trigger attribute defines the individual trigger for a single accordion.

<div data-c-accordion-add></div>, <div data-c-accordion-remove></div>

These attributes define the dynamic icons that visually indicate the status of the accordion as being opened or collapsed.

<div data-c-accordion-content></div>

The content attribute defines the markup that contains the accordion's body content.



Version 2.4.17

Version 2.4.16

Version 2.4.11

Version 2.4.1

Version 2.3.12

Version 2.3.2