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
A description of how this component is accessible is on its way!
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
The accordion attribute defines a single accordion within the group.
The trigger attribute defines the individual trigger for a single accordion.
These attributes define the dynamic icons that visually indicate the status of the accordion as being opened or collapsed.
The content attribute defines the markup that contains the accordion's body content.
truevalue on the
data-c-accordionattribute would cause the component to break.
data-c-headingvalue on accordion triggers in the example code to accommodate support for the new heading system.