Use the accordion as a progressive disclosure component, to generate vertically stacked content in a page. It can reduce scrolling and save vertical space by 'hiding' contextual information under a descriptive title.
Accordions have two states - collapsed and expanded. In the collapsed state, users must be able to scan, and quickly understand from the label, what content to expect if they click to expand.
Do's
- Use labels that are short, easy to understand and convey the content inside the (hidden) container
- Make sure the sequence of elements is logical and reflects user mental models or task flow (i.e. chronological, hierarchical, frequency of use, etc.)
- Ensure this component solves the problem of reducing scrolling/shortening the page, without sacrificing page clarity
Don'ts
- Don't hide important information that should be present at all times
- Don't use unless scan-ability is key
- Don't use actionable items (i.e. forms, accordions, buttons, CTAs, etc.) or pictures in the content container
When to use
- When you need to present multiple sections of content in a simple way on one page, without overwhelming the user (especially on mobile)
- When information is contextual and not all users need all the content
- When content variety is high and logical grouping is clear (e.g. frequently asked questions, eligibility criteria by user type)
- When information is supplementary or progressive - the component can make extensive and complex content easier to digest
When not to use
- Don't use when pages are short (reading time: under 3 minutes), and accordions add interaction overhead without benefit
- Don't use when information is better structured horizontally (e.g. comparison between sections)