Library / UI components / Accordion
No. 009·noun·also called collapsible, expander, disclosure

Accordion

A stack of headings that each expand to reveal content underneath and collapse to hide it.

SPECIMEN · LIVE DEMO
Definition

What it is

An accordion is a vertical list of sections where only the headings show until you click one, which slides open to reveal its content. Click again and it folds back up.

Accordions keep long pages scannable: FAQs, settings groups, order details. Some allow several sections open at once; others close the previous one when you open another. Say which you want.

Tabs show one view at a time side by side; an accordion stacks sections vertically.

Say it like a builder

How to ask for it

Vague

“The FAQ page is really long. Make it so you only see the questions until you click.”

Precise

“Turn the FAQ into an accordion: each question is a clickable row with a chevron, and clicking expands the answer below it. Only one answer is open at a time, and all start collapsed.”

Why it works

"Only see the questions" leaves the interaction open; "accordion" names the expand/collapse pattern and the prompt decides one-at-a-time.

In the wild

You've seen this in

  • MThe FAQ section on most pricing pages
  • MApple's "Tech Specs" sections on mobile
  • AOrder details on an Amazon order page
Usage note

Often confused with