同主题的多段长内容、用户大多只挑其中几条读：FAQ、订单 / 物流分层、设置分组、产品长页的章节收纳。
界面与交互 · 内容与数据展示
折叠面板Collapse
把同主题的标题常驻、详情按需展开的折叠面板；箭头方向、活动计数与手风琴 / 多开模式让展开状态长在物件上。
订单详情：展开状态、模式与摘要都长在物件上
亲手展开 / 收起分组、切手风琴与多开、批量操作，再点「生成订单摘要」——箭头方向、活动计数、面板内容与摘要物件都即时变，不只靠底部说明。
第 0 步：这是订单 #1024 的折叠面板，4 个分组按需展开。点标题看箭头旋转与内容展开；切「手风琴 / 多开」看互斥与并存的差异；「全部展开 / 全部收起」做批量；最后点「生成订单摘要」（主操作）把当前展开状态汇成一张摘要物件——所有变化都长在物件上。
订单详情#1024
已展开 1/4- 08-05 10:24已下单订单生成，待支付
- 08-05 10:31支付成功微信支付 ¥248
- 08-06 09:12已发货顺丰速运 SF1234567890
- 08-07 14:50已签收本人签收，流程结束
模式
手风琴模式一次只开一项，「全部展开」需切到多开。
对照：默认手风琴模式，「订单时间线」已展开，活动计数 1/4 长在头部，箭头朝下。原因：标题常驻可扫描，详情按需展开，长度换成可扫描性。下一步：点「商品明细」看手风琴自动收起上一项；或切「多开」让多项并存，再点「生成订单摘要」把展开状态汇成一张摘要。
面板教会的知识点
把刚才操作里看到的现象命名为六条规则。
- 标题常驻、详情按需展开：4 个标题永远在，构成可扫描的目录；详情只在展开时占位——折叠把长度换成可扫描性。
- 展开状态可感知：箭头朝下表示展开、朝右表示收起；活动计数「已展开 X/4」长在头部，aria-expanded 让辅助技术同步知道。
- 手风琴互斥 vs 多开并存：手风琴开新项自动收上一项（一次只开一项）；多开允许同时展开多个，方便逐项对照。
- 批量操作给出口：多开模式下「全部展开」一键铺开；「全部收起」清空；手风琴下「全部展开」自动禁用并说明原因。
- 收起不等于删除：收起后内容仍在 DOM，aria-controls 关联标题与面板，再点仍能展开，长内容保持可滚动。
- 键盘可达：标题是可聚焦按钮，Tab 到达、Enter / Space 展开；面板用 role=region 关联，焦点不丢失。
什么时候用折叠面板
从「内容长，但用户只需挑几条读」判断，而不是看字段多不多。
内容都重要必须一眼看全（→ list 或 descriptions）；要并排对照多组（→ tabs）；层级导航（→ tree）；临时弹层（→ drawer）。
怎么用：从模式到键盘的最短路径
一次到位的检查顺序。
- 定模式：只读一条选互斥手风琴；要逐项对照选多开；默认展开第一项或深链接命中的那一项。
- 给语义：标题用 button，带 aria-expanded 与 aria-controls；面板用 role=region 关联标题，aria-level 通过外层标题传递。
- 给批量出口：多开模式提供「全部展开 / 全部收起」；手风琴模式下展开全部应禁用并说明，而不是悄悄允许。
- 给动画与减动效：箭头旋转、面板高度用可中断的短过渡；prefers-reduced-motion 下直接显隐，不阻塞键盘。
- 给键盘与深链接：Tab 到达标题、Enter / Space 展开；收起的内容不删，深链接或报错提示能定位到展开项。
同一订单详情：正例与反例
目标都是把 4 组信息收纳好。差别只在于展开状态、模式与键盘是否守规则。
标题是 button 带 aria-expanded；箭头方向与活动计数 1/4 同步；手风琴默认展开「订单时间线」，点新项自动收上一项；键盘可 Tab / Enter 展开；「生成订单摘要」把展开状态固化成可复核物件。
用户一眼锁定要看的，键盘与读屏同步。标题是普通 div 不可点；没有展开状态标识；点开一项全部摊开且无法收起；键盘根本到不了；摘要永远是一句静态文案，与展开状态无关。
页面拉很长，用户不知道哪项展开、怎么收起。快速自测
设置页有「通知 / 隐私 / 外观 / 账户」4 组，每组里多项要同时来回调，该用哪种模式？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。