Skip to content
IndexDesign corpus

Accordion

98 resources ship this component · Data Display

Also called: collapse, collapsible sections, expandable, expander, expandable section, show hide, arrow toggle, toggle sections.

Before you ship5 checks
  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 it98