Skip to content
Index730 resources
Accordion

Accordion

94 resources in the index ship this component, best first. Group: Data Display.

Also called · collapse · collapsible sections · expandable · expander · expandable section · show hide · arrow toggle · toggle sections

Before you ship

5
  1. 01Header — The clickable area that triggers expanding and collapsing and has a title
  2. 02Expand/collapse icon — Visual indicator of the current state — typically a plus/minus, or a caret/chevron that rotates between states
  3. 03Content area — The content that shows or hides when toggled, containing detailed information associated with the header
  4. 04States — Default (collapsed), expanded, hover, focused, and disabled
  5. 05Expanding logic — Decide if users can open multiple sections at once, or one at a time

Checks from checklist.design, MIT.

Ships it

94