Accordion

Status

Component checklist

Key Points

• Use accordions for long content where a user can view one item at a time
• Every accordion must have a header that identifies what content is collapsed and hidden
• Accordions can have one or no accordion content open on first page load
• Opened accordions by default if a deep link triggers them

Accordions v Tabs

Both components display large volumes of content in a more compact space, helping to reduce initial page length and cognitive load. However, each has a specific usage.

Key Differences

• Accordions: Multiple sections can be open at once. Users expand only what they need. Better for varying content lengths and mobile viewports
• Tabs: Only one section is visible at a time. Users switch between complete views. Better for equal-length sections and desktop viewports

Critical Points

• Accordions allow selective, focused reading without requiring users to view all content
• Accordions work better when vertical space is available, but horizontal space is limited

File Links