Accordion
An interactive heading that reveals an associated section of content.The <Accordion /> component allows a user to gain a quick overview of information via the header, which they can click to expand or collapse the additional details beneath.
It is important to consider the heading structure of your whole page when adding an <Accordion /> or <AccordionGroup />. The heading in your accordion should fall logically within the page's heading hierarchy to help assistive technology users navigate the page. By default, the titleHeadingLevel prop is set to 2, rendering a <h2> as the HTML element for the heading with the style of a <h6>. You can adjust this level via the titleHeadingLevel prop by setting it to 2, 3, 4, 5 or 6. NOTE: This won't change the styles, just the HTML element.
By default, the accordion is collapsed but can be expanded on load by passing the expanded prop with the value of true.
There are two options for weight: bold (default) and subtle. It's best to keep weights the same across each Accordion in the same group. This provides consistency and the best user experience.
The bold weight is best for pages with ample space and at large screen sizes.
subtle weight is best used when space is constricted, e.g. in a card, tile, modal or side panel.
Spacing around the title text and details can be controlled by the density prop. Consistency across each Accordion in a group is important for readability, as with the weight.
By default the expand indicator (chevron) is placed on the right side of the header. The alignExpandIndicator prop allows for the title on the left side to vertically align with other element titles in the layout. Aligning the indicator to the left can be useful in large layouts where it may get overlooked, given the distance the user's eye needs to travel.
A custom header can be created and passed in to the customHeader prop. The title will be replaced by the custom header, though the expand indicator and spacing (via density) will remain. Remember to evaluate the heading structure of your page and where your custom header fits into the overall heading hierarchy.
To consistently group a set of accordions, you can use the <AccordionGroup /> component. This will stack the accordions with consistent spacing. You can also make the group discoverable as a landmark by screen readers by passing in an ariaLabel. It's important to keep the density, weight and alignExpandIndicator values consistent across each accordion in the group.