What is it?
An Accordion is a vertical stack of content panels that expand and collapse to reveal or hide related content. It reduces scrolling and organizes large amounts of text into manageable sections.
Elements
- Title: Summarizes the accordion item.
- Content: Provides supporting details.
- Call to action (optional): Can be added to allow users to take action.
Optional Container
- Accordion container component: If you put the accordion panels into the accordion container, you will get the functionality of an "Expand/Contract" all link as well as the ability to add a title and short description for the group of accordion panels.
How do you use it?
- Reserve for secondary content: Avoid hiding critical information in accordions.
- Group-related content: Ideal for FAQs or topics where users need access to only one or two sections.
- Maintain accessibility: Ensure users can easily discover content and complete tasks when accordions are used.
- Avoid friction: Don’t let accordions interfere with content discovery or task completion.
When to use
- Content-heavy pages: Breaks up long text.
- FAQs and help sections: Support user scanning.
- Mobile devices: Reduce scrolling and save space.
- Independent sections: Content in each panel stands alone.
Benefits
- Minimizes scrolling
- Improves organization
- Makes the page easier to scan
- Gives users control over what to view
- Saves space on long pages