An accordion is a list of headers that hide or reveal additional content when selected.
When to use the accordion component
- If you have only a small space to display a lot of content.
- If the content within the accordion item might not be necessary to all users.
- If you can summarize the content within in approximately one line of text for the heading.
When to consider something else
- If users need to see most or all of the information on a page. Use well-formatted text instead.
- If there is not enough content to warrant condensing. Accordions increase cognitive load and interaction cost, as users have to make decisions about what headers to click on.
The Accordion item "Body" field is a text editor, so it can accommodate text, heading structures, images and other media.
The first Accordion will default to being open and showing the content. It can also be collapsed.
Give your accordion a meaningful headline so users know what to expect when they expand it!