Accordion Expand
手风琴展开
Aliases:手风琴展开折叠展开展开收起动画下拉展开折叠面板
What is it
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.
Interactive playground
Try it. Make an informed choice.Loading demo…
✓ When to use
- FAQs, grouped settings, supplementary detail sections
- Long pages hiding low-priority content
- Exclusive sections — one open at a time
✕ When not to use
- Comparing several sections open at once
- Content over two screens — scrolling beats folding
- Critical steps in a flow — hiding adds friction
Variants
Single open
互斥展开
One open at a time — the classic accordion
Multi-open
多开
Independent toggles for parallel content
Grid rows
grid 动画
grid-template-rows 0fr→1fr — no height measuring
Implementation
display: gridgrid-template-rows 0fr → 1frmin-height: 0transition grid/heightModern CSS recipe — outer display:grid with grid-template-rows transitioning between 0fr and 1fr (300ms), inner min-height:0 plus overflow:hidden. No height measuring needed. Keep expand/collapse symmetric; rotate the chevron 90/180 in sync; under prefers-reduced-motion switch instantly.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Add accordion expand motion to the project's FAQ section. Check existing accordion/collapse components first; avoid duplicating them. Requirements: - grid-template-rows 0fr→1fr height animation, 300ms - Mutually exclusive within a group (multi-open configurable), chevron in sync - Correct aria-expanded and keyboard operability - Respect prefers-reduced-motion - No new dependencies Run existing checks when done and list modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
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.
ComponentsApplies toLayer 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 panel concentrating filter controls beside the list (or revealed in a drawer or popover): checkbox groups, radios and sliders compose the current query. It syncs with the list to refresh result counts, echoes selected conditions and offers clear-all.
ComponentsApplies toA utility page for managing account preferences and system configuration: a stable settings nav on one side (general, notifications, security…), and rows of "label + control + hint" forms on the other — low-frequency edits, saved as they change. Organized by configuration domain rather than task flow; users locate sections by scanning titles, change, and leave.
PagesUsed with