手风琴展开
Accordion Expand
别名:手风琴展开折叠展开展开收起动画下拉展开折叠面板
这是什么
点击标题后内容区在高度方向展开或收起，像手风琴风箱。 关键是用 grid-template-rows 从 0fr 到 1fr 的高度动画， 让内容"推开来"而不是瞬间出现， 同时箭头旋转呼应状态。
交互实验室
试一试，再决定怎么用正在加载演示…
✓ 适用场景
- FAQ、设置分组、详情页补充信息
- 长页面需要折叠低优先级内容
- 同组内容一次只看一个（互斥手风琴）
✕ 不适用场景
- 用户需要对比多个展开项（互斥会烦）
- 内容超过两屏（滚动比折叠更自然）
- 关键操作路径上的步骤（隐藏即摩擦）
常见形式
互斥展开
Single open
同时只开一项，经典手风琴
多开
Multi-open
各项独立开合，适合并列内容
grid 动画
Grid rows
grid-template-rows 0fr→1fr，免测高度
实现要点
display: gridgrid-template-rows 0fr → 1frmin-height: 0transition grid/height现代纯 CSS 法：外层 display:grid，grid-template-rows 在 0fr 与 1fr 间过渡（300ms）， 内层 min-height:0 + overflow:hidden。 免去 JS 测量高度。 展开/收起方向一致；箭头 rotate 90/180 同步过渡； 尊重 prefers-reduced-motion 改为瞬时切换。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
为项目 FAQ 区添加手风琴展开动效。 先检查现有 accordion/折叠组件，避免重复实现。 要求： - grid-template-rows 0fr→1fr 高度动画，300ms - 同组互斥（可配置多开），箭头同步旋转 - aria-expanded 正确、键盘可操作 - 尊重 prefers-reduced-motion - 不引入新依赖 完成后运行现有检查，说明修改文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
由多个可折叠区块组成的垂直列表：点击标题展开内容、再点收起，可互斥（同时只开一项） 也可多开。用于在有限空间里收纳成组内容，让用户按需展开。
组件应用于把信息分层呈现：先给最常用、最必要的部分，把次要细节藏到"展开""下一步""显示更多"后面， 用户主动索取时才展示。它解决的是一次性塞给用户太多内容的问题—— 降低初始认知负担，让界面入门简单，同时保留深度供高级用户按需取用。
交互模式搭配使用集中承载筛选条件的面板，常驻列表侧边或以抽屉、浮层唤起：复选组、单选、滑杆组合出当前查询。 与列表实时联动刷新结果数，并支持已选条件回显与一键清除。
组件应用于集中管理账号偏好与系统配置的功能页面：一侧是稳定的设置导航（通用、通知、安全等分区）， 另一侧是行式表单列表——每行一个"标签 + 控件 + 说明"，低频修改、即改即存。 页面按配置域分区而非按任务流组织，用户靠扫读标题定位，改完即走。
页面搭配使用