返回
UI · №07 · SPECIMEN
手风琴Accordion
点一下展开点一下收起的列表折叠面板FAQ 那种一条条展开的
LIVE SPECIMEN真的能玩，点点看
全部免费开源，词条可自由复制使用。
可以，每条都实测过才标「已验证」。
架构、测试领域已在路上。
先看结论
一组可展开/收起的条目：点标题展开内容，常配「单开」模式（开新的自动关旧的）。
- 适合
- FAQ、设置分组、条目多但不必同时可见的说明。
- 不适合
- 用户需要对比多段内容时——来回开关很烦，不如直接平铺。
直接发给 agent
Build an FAQ accordion: each item has a question header with a chevron that rotates when expanded, smooth height transition on expand/collapse, only one item open at a time, using <details>-like semantics.已于 2026-07-17 实测通过
技术标注2 项
- web
- <details>/<summary>（原生可折叠）
- react
- <Accordion>（Radix/shadcn）
详细说明
手风琴的本质是「渐进披露」：先给标题，感兴趣再展开。它天然适合 FAQ 这类“用户只关心其中一两条”的内容，天然不适合“每条都该被看到”的内容。