Accordion

Overview

Accordion organizes content into collapsible sections, revealing detail on demand without navigating away. With 6 appearance styles, full interaction state coverage, and rich content visibility control, it adapts to FAQs, settings panels, navigation menus, and any layout where progressive disclosure improves clarity.

When should you use them?

Use an accordion when users need to scan section headers and open only the content that interests them, like an FAQ, a settings group, or a long form split into steps. Use tabs instead when sections are parallel and users switch between them rather than reading several.

How should you use them?

• Use an accordion for progressive disclosure of stacked sections; use tabs to switch between parallel views.
• Write clear, descriptive headers so users can predict what each section contains.
• Decide whether multiple sections can stay open at once, or only one at a time.
• Keep important content visible by default, rather than hidden in a collapsed section.
• Show the expand and collapse state clearly with a consistent caret or icon.
• Keep headers keyboard-operable and announce the expanded state to screen readers.