Accordion
手风琴 / 折叠面板
Click a heading and the content below it expands; click again and it collapses back out of the way.
Live Demo
Actually clickableOriginals run about 3–5MB, thumbnails around 200KB. When you clean up you can choose "delete the original, keep the thumbnail" — browsing stays unaffected while you reclaim most of the space.
Yes. Deleted photos move to "Recently deleted" and stay there for 30 days. Pick "Restore" from that folder and they go back where they were.
The system compares each image's content hash and capture settings. The same photo at different resolutions or in different formats counts as a duplicate, and you can choose which version has the best quality.
What you just saw:The question-and-answer list on an FAQ page, the "About this Mac ›" groups in a settings screen, the collapsible entries of a help center — click a heading and another paragraph appears below it.
What it actually is
The purpose of an accordion is to compress a lot of information into a smaller space. It can allow several panels open at once, or only one at a time — the latter is strictly speaking closer to a Collapsible. The classic use is an FAQ.
Anatomy · What it's made of
Header标题行
The entire row is clickable, height ≥44px
Label标题文字
The heading text — says what is inside
Chevron箭头
Points right → points down, rotating 180°
Content内容区
Revealed when expanded
Expanded State展开态
Chevron rotated, content visible
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| There is a lot of content that can be compressed into a small space (FAQ) | Yes |
| Users do not need to see everything at once | Yes |
| Entries vary in length and cannot be aligned into a table | Yes |
| Users need to compare the content of all entries side by side | No |
| The content is only two or three lines — just show it directly | Depends |
If users need to compare details across several entries, hiding them behind clicks only adds work.
Using an accordion when there is a single entry is pure packaging with no payoff.
Similar Patterns
Don't mix these upAccordionCurrent
手风琴 / 折叠面板
Click a heading and the content below it expands; click again and it collapses back out of the way.
Collapsible
单项折叠
Only one section stays open at a time — open a new one and the previous one closes itself.
In one line:Click a heading and the content below it expands; click again and it collapses back out of the way.
Collapsible
单项折叠
Only one section stays open at a time — open a new one and the previous one closes itself.
Tabs
标签页
Several peer content sections sit side by side; switching tabs swaps the whole panel — and each one gets its own URL.
Progressive Disclosure
渐进式呈现
Show only what the user needs by default, and hide the rest behind a "Show more" affordance.
How to tell AI
Three levels of promptAdd the component name and specifics
Add an FAQ accordion: multiple entries can be open at the same time, the whole heading row is clickable, the chevron on the right rotates 180° when expanded, and the content uses a grid-row transition.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add something that expands when you click it.
Say this instead
Add an FAQ accordion: multi-open, headings as button[aria-expanded] with a full-row hit area ≥48px, chevron rotating 180° when expanded, content animated with a grid-template-rows 0fr→1fr height transition.
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.