Day 21 · Accordion 折叠面板：多段内容，先收起来

Accordion 折叠面板适合把多段相关内容压缩成一组可展开的标题和面板。WAI-ARIA APG 把它定义为一组垂直堆叠的交互标题，用来显示或隐藏对应内容区；它常用于减少同一页面里多段内容带来的滚动压力。1

Accordion 的核心是「标题控制面板」。Material UI 也把 Accordion 拆成 Summary、Details 和可选 Actions：标题负责展开/收起，内容放在详情区，必要时再加操作按钮。2

它和 Tabs、Tree View 最容易混：Tabs 更像同级内容组之间切换；Tree View 更适合表达多层级目录。Carbon 也把 Tree View 列为嵌套信息很多时的替代方案。3

在 Ant Design 里，Collapse 默认允许多个面板同时展开；开启 accordion 模式后，同一时间只展开一个面板。它也支持无边框、幽灵样式、额外节点、触发区域控制等形态。4

该用 Accordion：信息彼此相关，但用户不一定要一次读完；页面太长，需要减少滚动；移动端、侧栏或窄容器里空间紧。Carbon 的使用指南也把「组织相关信息」「缩短页面」「空间有限」列为适用场景。5

别用 Accordion：用户很可能要读完全部内容，此时折叠只会多一次点击；内容层级很多时，更该考虑 Tree View；面板内部也不应该做横向滚动。Carbon 明确提醒，如果用户需要读完全部内容，不要用 Accordion；长到超过视口的内容应让整个 Accordion 垂直滚动，而不是让单个面板内部滚动。6

能不藏，就别折叠。只有当「标题足够清楚、内容可按需阅读、空间真的紧」这三件事同时成立，Accordion 才是好选择。