Accordion

v1.1

An accordion is a tool used to hide and reveal content as part of progressive disclosure. Tapping the icon button on each accordion row will expand or collapse the content.

Stylized artwork of an accordion.

Considerations

Progressive

Accordions reduce visual complexity and information density.

Empower

Users decide what information they want to see and when.

On-demand

Revealing and hiding information is a single tap away.

Anatomy

Properties

Behavior

Screen sizes

Best practices

Sub sections

Specs