手风琴
Accordion
别名:手风琴折叠面板折叠菜单展开收起可折叠区块FAQ 折叠列表点标题展开的那种列表
这是什么
由多个可折叠区块组成的垂直列表：点击标题展开内容、再点收起，可互斥（同时只开一项） 也可多开。用于在有限空间里收纳成组内容，让用户按需展开。
交互实验室
试一试，再决定怎么用展开与收起不同分组，比较单项和多项展开的阅读节奏。
正在加载实验室…
使用时关注什么
- 01标题应始终可见，折叠不能让用户失去位置。
- 02展开状态通过 aria-expanded 表达，按钮保留焦点。
✓ 适用场景
- FAQ、帮助中心的分组问题
- 设置页分组长表单（高级选项默认收起）
- 移动端长内容分期呈现
✕ 不适用场景
- 用户需要同时对照多块内容
- 核心内容应默认可见（收起会藏关键信息）
- 打印或 SEO 需要全量文本（需处理展开态）
常见形式
单开
Single
同时只展开一项，最常见
多开
Multiple
各项独立展开收起
分隔卡
Bordered
每项带边框或分隔线，区块感更强
实现要点
grid-template-rowstransitionoverflow: hiddentransform: rotate展开动画：grid-template-rows 0fr→1fr 过渡（或测量 scrollHeight 设 max-height）， 箭头 rotate 180° 同步旋转。标题用 button，Enter/Space 触发；aria-expanded + aria-controls 关联面板。互斥逻辑放在受控 state 里处理；尊重 prefers-reduced-motion 时可去掉高度动画。
平台 API
<details><summary>代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
相关概念
点击标题后内容区在高度方向展开或收起，像手风琴风箱。 关键是用 grid-template-rows 从 0fr 到 1fr 的高度动画， 让内容"推开来"而不是瞬间出现， 同时箭头旋转呼应状态。
动效搭配使用把信息分层呈现：先给最常用、最必要的部分，把次要细节藏到"展开""下一步""显示更多"后面， 用户主动索取时才展示。它解决的是一次性塞给用户太多内容的问题—— 降低初始认知负担，让界面入门简单，同时保留深度供高级用户按需取用。
交互模式搭配使用用一排可切换的标签把同一区域的内容分成互斥视图：标签头常驻可点击，仅当前 标签对应的面板可见，其余隐藏。适合把高度相关的几类内容压缩在同一区域内 就地切换，避免整页跳转。键盘上用左右方向键在标签间移动，是可访问性的经典范例。
组件相似概念由触发按钮就近弹出的一组操作菜单，用于收纳次要操作，保持界面整洁。 典型形态是「···」更多按钮；面板带阴影浮于内容之上，点击菜单项即执行并关闭， 危险操作以红色项与分隔线隔离。
组件相似概念