The accordion component is used to generate vertically stacked content in a page. It is intended to save vertical space by hiding content, reducing scrolling.
Accordions contains labels with the relevant information. Users can click on the accordion to read additional information. For this reason, accordion labels (collapsed state) should be as descriptive and concise as possible.
Do's
- use labels that are representative of the content inside the (initially hidden) container
- order logically (such as 1st quarter, 2nd quarter, 3rd quarter, 4th quarter)
- make sure this component is required in order to shorten the page
Don'ts
- don't use unless users will benefit from hidden information
- don't use actionable items (i.e. forms, accordions, buttons, CTAs, etc.) or pictures in the content container as they will have decreased visibility
- don't hide important information that should be present at all times
- don't use long labels, ideally keep it to one line, maximum 2
When to use
- when you need to present multiple sections of content in a simple way on one page, without overwhelming the user (especially applicable to mobile)
- when it’s not critical for every user to read every section of content, adding value
- when you can make extensive and complex content easier to digest through descriptive labels
When not to use
- don't use when pages are short (reading time: under 3 minutes)
- don't use when information would be better structured horizontally (does not need comparison between sections) - use tabs instead