Accordion

When to use

Use to collapse content and make page length manageable. Particularly valuable on mobile and for reducing cognitive load in complex interfaces.

When not to use

When users need to see and compare all content simultaneously. Don't nest accordions inside accordions.

Guidelines

• Use a caret icon: Research shows a downward-facing caret is the safest icon for signalling expandable content.
• Don't split actions: Icon and label must trigger the same action. users tap equally on both.
• Descriptive labels: Users must identify the right accordion before clicking. labels do the heavy lifting.
• Animate state changes: Rotate the caret or transition plus-to-minus to signal the change.

How it works