VOL. III · CH. 3.10 · COMPONENT
Accordions
Progressive disclosure for content that's useful but shouldn't dominate the page by default.
1 min read · 120 words
3.10.1Definition & Anatomy
An accordion is a stack of collapsible sections, each with a header that expands/collapses its content, letting users reveal only what they need.
3.10.2Common Mistakes
- Using an accordion for content the user needs to compare across sections, forcing repeated open/close instead of simultaneous viewing.
- No visual indicator (chevron/plus icon) signaling that a header is expandable.
3.10.3Best Practices
- Reserve accordions for content that's genuinely optional or supplementary per section — not core content users need to scan together.
- Animate expand/collapse smoothly, and support keyboard operation (Enter/Space to toggle).
ExampleFAQ pages (3.19) are the canonical accordion use case — each question collapsed by default, since most visitors only care about one or two specific answers.