Navigation
Accordion
Collapse supporting detail so a long page stays scannable. Expand one panel at a time, or several if the content is independent.
Purpose
Best for content most people will skip — FAQs, optional detail. For a single show/hide region use Collapsible.
Example
Accessibility & keyboard
- Triggers are buttons carrying
aria-expanded, so state is announced. - Keyboard: Enter or Space toggles a panel; Tab moves between triggers.