Accordion
手风琴 / 折叠面板
点一下标题，下面的内容就展开；再点一下，收起来。
Live Demo
真的可以点原图约 3–5MB，缩略图约 200KB。清理时可以选择「删除原图，保留缩略图」，这样浏览不受影响但能省下大部分空间。
可以。删除后的照片会进入「最近删除」，保留 30 天。在「最近删除」里选择「恢复」即可回到原位置。
系统会比较图片的内容哈希和拍摄参数。同一张图的不同分辨率、不同格式会被判定为重复，你可以选择保留画质最好的一张。
你刚才看到的这个：FAQ 页面的问答列表、设置页的「关于本机 ›」分组、帮助中心的折叠条目——点标题下面就多出一段文字。
它到底是什么
Accordion 的用途是「把很多信息压缩到更小的空间里」。它可以同时展开多个，也可以一次只开一个（后者严格说更接近 Collapsible）。经典场景是 FAQ。
Anatomy · 它由什么组成
Header标题行
整行可点，高度 ≥44px
Label标题文字
说明里面有什么
Chevron箭头
右向 → 下向，旋转 180°
Content内容区
展开后显示
Expanded State展开态
箭头旋转，内容可见
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 内容多但可以压成小空间（FAQ） | 用 |
| 用户不需要同时看到所有内容 | 用 |
| 条目长度不一、无法对齐成表格 | 用 |
| 用户需要横向比较所有条目的内容 | 不用 |
| 内容只有两三行，直接显示即可 | 视情况 |
如果用户需要对比多个条目的细节，折叠起来反而增加了操作成本。
在内容只有一条时用 Accordion 是纯粹的包装。
Similar Patterns
别搞混一句话区分：点一下标题，下面的内容就展开；再点一下，收起来。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
加一个 FAQ 折叠面板：可同时展开多个条目，标题整行可点，右侧箭头在展开时旋转 180°，内容用网格行过渡动画。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加个点一下展开的东西。
改成这样说
加 FAQ Accordion：可多开，标题用 button[aria-expanded] 且整行热区 ≥48px，箭头展开时旋转 180°，内容用 grid-template-rows 0fr→1fr 过渡实现高度动画。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。