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<br/>• 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

For full implementation detail, examples, and testing notes, see references/pattern.md.

Pattern page: https://uxpatterns.dev/patterns/content-management/accordion

npx skills add thedaviddias/ux-patterns-for-developers --skill accordion