Accordion
A UI pattern that shows and hides sections of content with a toggle interaction.
Plain English
An accordion hides content behind expandable headers, showing only what the user explicitly wants to see. It is the right choice for FAQ sections, settings grouped by category, and secondary detail that most users skip. The discipline is knowing when NOT to use it: if users need to compare content across multiple sections simultaneously, showing all at once is better. Accordion items should be independently usable — opening one should not force another to close (unless you need exclusive sections, which is a design choice not a technical requirement).
Technical
Implementation: trigger button (role="button", aria-expanded, aria-controls) + content panel (id matching aria-controls, aria-labelledby matching trigger id). CSS: max-height: 0 + overflow: hidden → max-height: large value + transition for smooth animation. Or height: 0 (but transitions on height need a known target value). Accessibility: keyboard users press Enter/Space to toggle, Tab to move between items. Allow-multiple vs allow-single (exclusive) modes. Chevron icon rotation (▼ → ▲) communicates state.
Live Demo
A design system is a collection of reusable components, guided by clear standards, that can be assembled to build any number of applications. It creates a shared language between designers and engineers.
Limit yourself to 4–6 type sizes per UI. A typical scale includes: caption (12px), body (16px), subheading (18px), heading (24px), display (30–36px). More than 6 creates visual noise.
The 8px grid is a spacing system where all dimensions, padding, and margins are multiples of 8. It creates visual rhythm, simplifies design decisions, and ensures consistent hand-off between design and code.
Modals are best for critical, blocking actions — confirmations, errors, or brief focused tasks. Avoid them for navigation, step-by-step flows, or content that users need to reference while completing a task.
Accordions reduce cognitive load by hiding secondary content. Keep labels scannable.
Usage
✓ Good usage
An FAQ accordion where each question expands to show the answer independently — users scan questions, expand only the ones they need.
✗ Bad usage
An accordion for a settings page where users need to fill in ALL sections — hiding content they must complete creates friction.
Recommended values
- Trigger height: 48-56px
- Panel padding: 16-20px
- Chevron: rotates 180° on expand (transition: 200ms)
- Border: 1px bottom separator between items
- Default: first item expanded (if content is commonly needed)
- Allow multiple open by default
Common mistakes
- Closing the open item when another opens (exclusive mode) — often prevents users from comparing two answers.
- No visual indicator of expand/collapse state — missing chevron or icon.
- Animation too slow (>300ms) — feels sluggish.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Accordion: 52px trigger height, 1px bottom border, rotating chevron icon (180° when open, 200ms transition). Panel: 18px padding, smooth max-height transition (250ms ease-out). aria-expanded and aria-controls on trigger. Multiple panels can be open simultaneously by default.