Accordion

Accordion is an interactive element that works alongside Accordion Item to organise and display content in a collapsible and expandable way.

Implementation

Heading Levels

Headings are the backbone of the content of a page. A visitor should be able to scan the webpage using headings to get a good impression of its content.

Heading levels have meaning, especially for screen reader users and search engines. That means one unique first level heading per page, with the other headings representing the page content similar to the index of a book: easily scannable and semantic.

Accordion Item Heading Level

To maintain the correct heading hierarchy of your page when using the Accordion, use the heading-level attribute to adjust the level of the Accordion Item heading to fit the structure of the page.

Best Practices

Avoid Hiding Essential Information

Hiding content behind navigation diminishes people’s awareness of it. An extra step is required to see the information. Headings and titles must be descriptive and enticing enough to motivate people to “spend” clicks on them. When content is hidden, people might ignore information.