thedaviddias Accordion
Expand and collapse content sections
What it solves
An accordion consists of vertically stacked headers that expand or collapse to reveal or hide related content. Accordions conserve screen space by displaying content in a structured, interactive way. Accordions work well for FAQs, settings panels, and structured content where users access multiple sections without scrolling through everything.
When to use
Use accordions to present structured content benefiting from progressive disclosure. Common use cases include:
- FAQs (Frequently Asked Questions) – Users find answers quickly
- Settings and Preferences – Options organize into collapsible categories
- Product Details or Features – Users expand sections they're interested in
- Documentation or Guides – Step-by-step content stays organized
- Navigation and Filtering – Sidebars use them for hierarchical content
When to avoid
- All content needs simultaneous visibility (comparison tables)
- Content is too short—collapsing small text reduces usability
- Frequent section switching needed—tabs work better
- Multiple sections need simultaneous viewing (Terms and Conditions)—try popovers, modals, or side panels
- Deep nesting of multiple levels—structured outlines or table of contents work better
Implementation workflow
- Confirm the pattern matches the problem and constraints before copying the example.
- Start from the anatomy and examples in
references/pattern.md, then choose the smallest viable variation. - Apply accessibility, performance, and interaction guardrails before layering visual polish.
- Use the testing guidance to verify behavior across keyboard, screen reader, responsive, and failure scenarios.
Accessibility guardrails
Keyboard Interaction Pattern
The following table outlines the standard keyboard interactions for accordion components. These interactions ensure that users can navigate and operate accordions effectively using only a keyboard.
| Key | Action |
|---|---|
| Enter or Space | • Expand a collapsed panel; collapse all others• Collapse an expanded panel |
| Tab | Move focus to the next focusable item in the tab sequence. Focus will progress into an accordion panel. |
| Shift + Tab | Move focus to the previous focusable item in the tab sequence |
| Down Arrow (Optional) | Move focus to the next accordion header |
| Up Arrow (Optional) | Move focus to the previous accordion header |
| Home (Optional) | Move focus to the first accordion header |
Related patterns
- https://uxpatterns.dev/patterns/content-management/expandable-text
- https://uxpatterns.dev/patterns/content-management/modal
- https://uxpatterns.dev/patterns/navigation/tabs
For full implementation detail, examples, and testing notes, see references/pattern.md.
Pattern page: https://uxpatterns.dev/patterns/content-management/accordion