An accordion is a simple way to display content rich information. Accordions are an easy way of presenting content that doesn’t fit into a list item and can help reduce information overload and page length.
How do accordions work?
Accordions work by grouping information in a container and displaying the title in a stacked menu. When a user clicks on the item’s title, the field expands to reveal the related body content.
Accordions allow information to be dynamic, allowing the user to have control over what they want to read and what to ignore. By default, accordions are set to be closed, but you can set them to open display.
Why use an accordion
We recommend using accordions to:
- break up a large amount of information
- group types of information
- display sequential instructions and procedures
- minimise page scrolling
- help users quickly find the information they are looking for.
When to use accordions (and when to avoid them)
Using accordions can help reduce the number of pages on your site as you can use them to condense information on a single page.
The trick is not to overuse them and always ensure your content (headings and body copy) are succinct. If you need more than 10 accordion tabs, you need to review, shorten and reorganise your page content for your audience so they can effectively navigate and browse your page content.
View instructions on how to add an accordion module to your webpage.
Have questions about your web editing?
Remember, we’re always here to help! To reach out, please:
