Accordion
手风琴
Aliases:手风琴折叠面板折叠菜单展开收起可折叠区块FAQ 折叠列表点标题展开的那种列表
What is it
A vertical list of collapsible sections: clicking a header expands its content and clicking again collapses it, either exclusively (one open at a time) or independently. Packs grouped content into limited space for on-demand expansion.
Interactive playground
Try it. Make an informed choice.Expand different sections and compare the reading flow.
Loading lab…
What to look for
- 01Keep headings visible when details collapse.
- 02Expose expansion with aria-expanded and retain button focus.
✓ When to use
- FAQ and help-centre question groups
- Long settings forms with advanced sections collapsed
- Progressive disclosure of long content on mobile
✕ When not to use
- Users must compare sections side by side
- Essential content should be visible by default
- Print or SEO needs full text — handle the expanded state
Variants
Single
单开
One open at a time, the common default
Multiple
多开
Sections expand independently
Bordered
分隔卡
Per-item borders or dividers for stronger grouping
Implementation
grid-template-rowstransitionoverflow: hiddentransform: rotateExpand animation: transition grid-template-rows 0fr→1fr (or measure scrollHeight into max-height); rotate the chevron 180° in sync. Headers are buttons triggered by Enter/Space; link panels with aria-expanded + aria-controls. Keep the exclusive logic in controlled state; drop the height animation under prefers-reduced-motion.
Platform API
<details><summary>In code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
Related concepts
Tapping a header expands or collapses the content vertically, like a bellows. The crux is animating grid-template-rows from 0fr to 1fr so content unfolds instead of popping in, with the chevron rotating in sync.
MotionUsed withLayer the information: show only the most common and necessary parts first, hiding secondary details behind "expand", "next step" or "show more" until the user asks for them. It solves the problem of overwhelming users at once — the initial cognitive load stays low and the surface easy to learn, while depth remains available on demand for advanced users.
PatternsUsed withA row of switchable labels that divide one region into mutually exclusive views: the tab headers stay visible and clickable, and only the active tab's panel shows while the rest stay hidden. Packs several tightly related contents into one area to switch in place instead of full-page navigation. Arrow-key navigation between tabs makes it a classic accessibility showcase.
ComponentsSimilarA menu of actions popping near its trigger to tuck away secondary operations and keep the interface tidy — the classic form being a "···" more button. The panel floats over content with a shadow; picking an item executes and closes, and destructive actions sit isolated below a divider in red.
ComponentsSimilar