Guidelines
Accordion helps the user to choose from sections of different content, and can be used either to focus the user's task, and save space if there would too many options displayed.
Structure
Accordion is a vertically stacked list of items that utilizes show/hide functionality. When a label is clicked, it expands the section showing the content within. There can have one or more items showing at a time and may have default states that reveal one or more sections without the user clicking.
Best practices
Accordions should:
- Have clear titles, as it acts as in-place navigation showing the user the contents.
- Use nouns as title names.
- Contain similar content in each accordion panel.
- Focus on one task in each panel.
- Show default selection by opening up the most important or the first option. This also hints to the user how the compnent works.
Try to avoid:
- Using overlapping titles, that confuses the user and keeps them from choosing the right one.
- Using accordion as navigation with displaying dissimilar content in the accordion panels.