Recipe
Accordion Design Patterns
Expandable sections that reveal content on demand. Clean, accessible, and performant.
Core Principles
- ▸Only one panel open at a time — reduces cognitive load
- ▸Chevron rotation signals state; pair with smooth height transition
- ▸Click target spans full header width — Fitts's law
Visual Structure
Section One▼
Content revealed when expanded.
Section Two▶
Section Three▶
When to Use
FAQs
Users scan questions, expand only what matters.
Settings Panels
Group related options without overwhelming.
Mobile Nav
Nested menus collapse into accordions on small screens.
Checkout Flows
Step-by-step with only current step expanded.