Collapsible
单项折叠
WebMobileDesktop上手难度: 容易
一次只展开一个——展开新的，旧的自动收起。
Live Demo
真的可以点扫描相册中的图片和视频文件，识别重复项与相似项。
查看各类文件占用的空间，定位可清理的大文件。
已删除内容保留 30 天，可随时恢复。
你刚才看到的这个：折叠面板里点开第二个，第一个自动合上——很多手风琴默认就是这个行为。
它到底是什么
Collapsible 和 Accordion 是同一套机制的两种策略。Accordion 可以同时开多个，Collapsible 是「互斥」版本。看它们的区别主要看业务：需要对比就用 Accordion，一次看一个就用 Collapsible。
折叠collapsible单开折叠expandable section可展开区块
Anatomy · 它由什么组成
Trigger触发器
标题行 + 箭头
Panel内容面板
同一时刻只有一个可见
Indicator状态指示
箭头方向
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 一次只需要关注一个内容块 | 用 |
| 内容较长，展开多个会撑爆页面 | 用 |
| 选项之间有关联（选了 A 会影响 B） | 用 |
| 需要对比多个条目 | 不用 |
如果用户的真实需求是「同时看两条」，互斥展开会不断打断他们。
只有一条时用 Collapsible 是把一个简单问题复杂化。
Similar Patterns
别搞混一句话区分：一次只展开一个——展开新的，旧的自动收起。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
加一个单项折叠面板：点击当前展开项则收起，点击其他项则切换过去，任意时刻最多一项展开。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加个折叠的，展开一个其他就关上。
改成这样说
加 Collapsible：state 存 openIndex（可为 null），点击已展开项收起、点击其他项切换，任意时刻最多一项展开，收起 180ms / 展开 250ms 高度过渡避免跳变。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。