Collapsible
单项折叠
Only one section stays open at a time — open a new one and the previous one closes itself.
Live Demo
Actually clickableScans the photo library for images and videos, spotting duplicates and similar shots.
Shows how much space each kind of file takes, and where the big cleanups are.
Deleted items are kept for 30 days and can be restored any time.
What you just saw:You open the second panel in a list and the first one folds shut automatically — that is the default behavior of many accordions.
What it actually is
A collapsible and an accordion are two strategies for the same mechanism. An accordion lets several panels open at once; a collapsible is the mutually exclusive version. Which one to use comes down to the job: use an accordion when people need to compare, and a collapsible when they only need to read one thing at a time.
Anatomy · What it's made of
Trigger触发器
The heading row plus a chevron
Panel内容面板
Only one is visible at any moment
Indicator状态指示
The chevron direction
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| The user only needs to focus on one block at a time | Yes |
| The content is long and opening several at once would blow out the page | Yes |
| The options are related (picking A changes what B means) | Yes |
| Users need to compare multiple entries | No |
If the real need is "see two things at once", mutually exclusive panels keep interrupting the user.
With only one entry, a collapsible turns a simple question into a puzzle.
Similar Patterns
Don't mix these upCollapsibleCurrent
单项折叠
Only one section stays open at a time — open a new one and the previous one closes itself.
Accordion
手风琴 / 折叠面板
Click a heading and the content below it expands; click again and it collapses back out of the way.
In one line:Only one section stays open at a time — open a new one and the previous one closes itself.
Accordion
手风琴 / 折叠面板
Click a heading and the content below it expands; click again and it collapses back out of the way.
Progressive Disclosure
渐进式呈现
Show only what the user needs by default, and hide the rest behind a "Show more" affordance.
Tabs
标签页
Several peer content sections sit side by side; switching tabs swaps the whole panel — and each one gets its own URL.
How to tell AI
Three levels of promptAdd the component name and specifics
Add a single-open collapsible panel: clicking the currently expanded item collapses it, clicking another item switches to that one, and at most one item is expanded at any time.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a collapsible thing where opening one closes the others.
Say this instead
Add a collapsible: keep openIndex in state (nullable), clicking the open item collapses it and clicking another switches to it, at most one panel open at a time, 180ms collapse / 250ms expand height transitions so the two do not overlap and jump.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.