Accordion/Collapsible Component

Design an accordion/collapsible component that expands and collapses content sections.

R - Requirements

Key Questions:

• Single or multiple open? (single, multiple, both)
• Default state? (all closed, first open, all open)
• Animated? (yes, smooth expand/collapse)
• Nested accordions? (yes/no)
• Persist state? (localStorage, URL hash)

Common Answers:

• Support both single and multiple
• All closed by default
• Smooth animations
• Support nested (FAQ sections)
• Optional persistence

A - Architecture

Accordion Interaction Flow:

Accordion Architecture:

Architecture Decisions:

• State management (open/closed per item) - Array of IDs or single ID based on mode
• Animation system (height transitions, smooth) - Measure content height, animate smoothly
• Keyboard navigation (arrows, Enter, Space) - Full keyboard accessibility
• Accessibility (ARIA expanded, controls) - Screen reader support

Relevant Content:

• State Machines - Expand/collapse state
• Accessible Animations - Motion preferences

D - Data Model

State Management:

• Open items (array of IDs or single ID)
• Accordion items (id, title, content, disabled)
• Animation state (expanding, collapsing)

Persistence:

• localStorage (optional, remember open items)
• URL hash (optional, deep linking)

I - Interface

Features:

• Accordion items (header + content)
• Toggle button (chevron icon, rotates)
• Smooth expand/collapse animation
• Keyboard navigation (arrows, Enter, Space)
• Nested support (accordion within accordion)

Accessibility:

• ARIA accordion pattern
• role="region" on container
• role="button" on headers
• aria-expanded (true/false)
• aria-controls (link header to content)
• aria-disabled (if disabled)
• Keyboard navigation (arrows, Enter, Space)

Relevant Content:

• Keyboard Shortcuts - Navigation
• ARIA Live Regions - State announcements

O - Optimizations

Performance:

• Lazy render content (only render when open)
• Memoize content (prevent re-renders)
• Animation performance (transform/height, GPU accelerated)

UX:

• Smooth animations (60fps expand/collapse)
• Focus management (focus header on collapse)
• Scroll into view (when opening)

Relevant Content:

• Animation Performance - 60fps animations
• Composite Layers - GPU acceleration

Implementation Checklist

• Single/multiple open mode
• Toggle button (chevron, rotates)
• Smooth expand/collapse animation
• Keyboard navigation (arrows, Enter, Space)
• ARIA attributes (role, aria-expanded, aria-controls)
• Lazy render content (only when open)
• Focus management (focus header on collapse)
• Scroll into view (when opening)
• Nested support (optional)
• Persistence (localStorage, optional)

Common Pitfalls

❌ Rendering all content → Performance issues
✅ Lazy render content, only render when open

❌ Janky animations → Poor UX
✅ Use transform/height, GPU acceleration, 60fps

❌ No keyboard navigation → Poor accessibility
✅ Arrow keys to navigate, Enter/Space to toggle

❌ No focus management → Focus lost on collapse
✅ Return focus to header when collapsing