Overview
Accordions expand and collapse sections of content.
How to use
- Use an Avada Toggle element (default)
- No additional classes are required as this is a global element
Usage guidelines for accordions
When to use it
Accordions are to be used sparingly for primary content on a page. While they can be appropriate for organising small, specific sections of content, accordions aren’t a suitable replacement for well formatted plain text. If a user needs all, or most of the information on the page it should be visible, not hidden inside an accordion.
Before using an accordion, consider whether the benefits outweigh the negative usability impacts.
- Hiding content makes it harder for a user to scan a webpage. If your content is hidden inside an accordion, it can be difficult for a user to scan the whole page for content relevant to them. Web browsers’ ‘Find on page…’ search functions don’t detect content hidden by accordions, making it harder for users to locate text.
- Accordions increase cognitive load. Forcing a user to click on each accordion to get the full text fragments their user experience, causing them to switch focus between accordions to get to the information. It’s also possible with hidden content, that a user might not see important information.
Accordions can be suitable when users need only a few key pieces of content on a single page. By hiding unimportant content within an accordion, users can efficiently focus on the few topics that matter.
When not to use it
- If the amount of content it would need to contain will make the page slow to load
- To split up a series of questions into sections, use separate pages instead
- With very short content, use lists or paragraphs
- With very long content, use tabs or separate pages
- With any other UI elements within the header
- For important information which if hidden could be missed
- Just to shorten a page
Accordions should be avoided when your audience needs most or all of the content on the page to answer their questions.