折叠面板
Accordion
点标题展开内容，同一组里通常只开一个，标题一直在。
- 又叫：
- 手风琴
- 展开收起
- 折叠展开
- collapsible panel
- collapse
- disclosure
- 展厅
- 布局与结构
- 形态
- 固定舞台
- 播放
- 手动触发
- 关键词
- 纯 CSS / 有状态 / 会引发重排 / 键盘可用 / 可以直接用
参数工作台
复制给 AI
随参数实时更新做一个折叠面板（accordion）：同一组里同时只展开一项（单开手风琴），展开和收起时长 260ms，缓动 cubic-bezier(0.22, 1, 0.36, 1)；标题用真正的 <button> 并带 aria-expanded，箭头图标展开时旋转 180°。动画不要碰 height: auto（浏览器不会过渡），用 grid-template-rows: 0fr → 1fr 配一层 overflow: hidden。系统开启「减少动态效果」时时长设成 0。
accordion disclosure pattern, single-open, only one panel expanded at a time, expand and collapse duration 260ms with easing cubic-bezier(0.22, 1, 0.36, 1), header is a real button with aria-expanded and a chevron that rotates 180deg when open, animate grid-template-rows: 0fr → 1fr inside overflow: hidden instead of height: auto, set duration to 0 under prefers-reduced-motion
https://publieople.github.io/design-museum/entry/accordion/?stage=light
链接带着你调好的参数
什么时候用
- FAQ、帮助文档，一屏要放十几条问题
- 表单里的高级设置，默认收起，需要的人再展开
- 移动端详情页，把长说明折起来省空间
适用场景：表单 / 页面 / 列表
推荐取值
- 展开时长
- 200–300ms
- 缓动
- ease-out / cubic-bezier(0.22, 1, 0.36, 1)
- 标题高度
- 40–48px
- 展开动画
- grid-template-rows: 0fr → 1fr（配内层 overflow: hidden）
- 图标
- 同一枚箭头旋转 180°
别搞混
和「选项卡 tabs」的区别
tabs 是对内容做横向切换，切走的那块完全消失；手风琴所有标题始终纵向排在一起，展开的内容还在标题下面，只是把下面的内容推下去。
和「弹层 popover」的区别
弹层浮在页面上方、会遮住别的内容；手风琴在文档流里撑开，不做遮挡。
容易踩的坑
- 不要对 height: auto 做过渡，浏览器不会对 auto 补间动画；改用 grid-template-rows: 0fr → 1fr，或先量出内容高度再写像素值
- 折叠部分要包一层 overflow: hidden，否则收起来时文字还露在外面
- 标题要用真正的 button（或 details/summary），并带上 aria-expanded，键盘和读屏才用得了
- 一旦允许多项同时展开，面板就成了长列表，这种场景该换 tabs 或分页
无障碍降级
prefers-reduced-motion: reduce 时把展开时长设为 0，内容直接显隐，箭头也不旋转。
关键词
- accordion
- collapsible
- aria-expanded
- details/summary
- grid-template-rows: 0fr
- disclosure pattern