产品参数页写完了，四十多行表格一路铺到底。设计师说折起来吧，运营立刻问了一句：折进去的内容，百度和谷歌还看得见吗？
这个顾虑拖住了很多页面的改版。先把它答掉：看得见。谷歌在移动优先索引的文档里写得明白——为了移动端体验把内容放进手风琴或选项卡是可以的，只要内容和桌面版等价；真正会掉流量的是另一回事，是你趁着做移动版顺手砍掉了内容。折叠只是展示方式，不是删除。
顾虑解决了，剩下的才是正题：同样是「点一下才展开」，做法差得很远。这 13 款按你要折的是什么内容归成四类，你多半只用读跟自己对上的那一类。最后一类其实不算折叠，放进来是为了把两件常被混为一谈的事分清。
一、一问一答：FAQ 那种手风琴
这是最常见的场景，也是最容易过度实现的场景。HTML 早就内置了这个控件，很多人不知道而已。
01. 一行 JS 都不写的那种：直接用 details 和 summary
原生 details / summary 零 JavaScript 全球支持率 97.02%
这一款的全部实现就是 HTML5 的 <details> 和 <summary> 加一层 CSS 皮。每个面板独立开关，手机平板桌面都适配。
用原生标签有三个白给的好处：caniuse 上全球支持率 97.02%；键盘和读屏软件天然能用，不用你去配 ARIA；页面加载时不需要等 JS 执行完才能点。
还有一件很多人不知道的事：给同一组 <details> 加上相同的 name 属性，就能实现「只开一个、开新的自动关旧的」，同样一行 JS 不用写。这个特性在 Chrome 120、Edge 120、Safari 17.2 落地，Firefox 从 130 起跟上，属于 Baseline 2024 的能力，现在用没问题。
02. 同样用原生标签，但把展开过程做成了动画
结构还是 details + summary，CSS 的 transition 负责过渡，JS 监听点击控制内容区显隐，右上角的加号会变成减号。比上一款多了一层交互反馈。
为什么原生标签做动画要多费这道手脚？因为展开后的高度是 auto，而 auto 长期以来不能参与过渡，所以大家只能用 JS 量一遍真实高度再赋值。这件事最近才有正解：::details-content 伪元素配上 interpolate-size: allow-keywords，能直接让高度从 0 过渡到 auto，记得给伪元素加 overflow: clip 免得内容溢出。它是纯粹的渐进增强——不支持的浏览器只是没有动画，功能一点不少。你要改造这一款，可以把 JS 那段换成这个写法试试。
03. 用 JS 的正确姿势：状态挂在 aria-expanded 上
如果你确实要自己写 JS 版手风琴，这一款是值得照抄的范本：折叠状态不是靠某个 class 记着，而是直接用 aria-expanded 的 true / false 来驱动。加号减号的图标也是 CSS 画的，没引图标库。
这一笔正好卡在无障碍规范上。W3C 的 ARIA 编写实践对手风琴的要求是这么几条：
标题那一行要有
role="button"，并且外面包一层带aria-level的标题元素；aria-expanded跟着面板的显隐走；aria-controls指向它控制的那块内容的 id；回车和空格键负责展开收起，Tab 键照常在页面里顺序走，不做拦截。
拿 class 当状态的写法，读屏用户听到的只是一个「按钮」，不知道它现在是开还是关。差别就在这儿。
04. 2KB，同一时间只开一个
只有 JS 和 CSS，总共 2KB，外观、动画速度、边距都能配。它默认同一时间只允许一个面板打开——这在 FAQ 场景里通常是对的，因为用户一次只读一条，全展开反而要滚很久。
不过这正是第 01 款那个 name 属性白给的行为。所以我的结论是：先用原生，只有当你确实要逐项配动画时长和边距的时候，这 2KB 才值得加。多数 FAQ 页不值得。
05. 纯 HTML 和 CSS 的那一版，做侧栏也行
样式偏时尚一路，颜色和字体按作者说明改起来不费劲。更值得留意的是它给的用法：除了 FAQ，还点名了左侧菜单和「查看更多」——这两个场景常被当成别的控件另写一套，其实和 FAQ 是同一个东西。
二、几块平行的内容：这时候该用选项卡
手风琴和选项卡不是一个东西的横竖两种摆法。手风琴的每一条彼此独立，读完一条可以接着读下一条；选项卡是几选一，你看这一块就等于放弃那一块。产品的「参数 / 评价 / 售后」适合选项卡，FAQ 适合手风琴，反过来用都会别扭。
06. 单选按钮改造的 Tab：CSS 里最经典的一招
藏起一组 radio，用 :checked 加兄弟选择器控制哪一块内容显示。之所以用单选按钮而不是复选框，是因为它天生就是「一组里只能选一个」，和选项卡的语义正好对上。高度切换做了平滑过渡，背景和阴影也调过。
这一招有两个躲不掉的限制。兄弟选择器只能往后选，所以内容面板必须排在标签后面，改版时调一次 DOM 顺序就可能整个失效。键盘上只能靠 Tab 一个个走，没有原生选项卡那种左右方向键切换。要照无障碍做，跳到第 09 款。
07. 更轻的一版
同样不写 JS，但走的是焦点状态那条路，不是 radio。代码比上一款更短。
靠焦点驱动有个连带后果：焦点一旦离开这块区域，选中态可能跟着丢。拿到代码先按几下 Tab 走一遍，确认切到别处再回来时面板还在，再决定用不用。
08. 深色毛玻璃那一款：给后台和 SaaS 用的
激活项是一块青紫渐变胶囊，内容区切换带平滑过渡，整体深色毛玻璃。作者的说法挺直接：普通的下划线式标签页没什么毛病，但放在 SaaS 产品或数据后台里就显得廉价。
这话有道理的地方在于，后台用户一天要在这套标签上点几百次，激活态够不够醒目、自己在哪一栏一眼看不看得出来，是每天都在消耗的东西。官网上的标签页点两下就走了，要求确实不一样。
09. 竖着排的选项卡，而且是照无障碍要求做的
标签竖排在左、内容在右，适合标签文字较长或者数量超过五六个的情况——横排到那个数量就该换行或者滚动了，都不好看。切换时会保证当前面板可见、其余隐藏，这一层对读屏软件很关键：隐藏面板必须是真隐藏，不能只是视觉上挪出屏幕，否则读屏会把所有面板的内容一起念出来。
三、内容本身带层级：折叠要能套折叠
前面两类都假设内容是平的。要是你的内容本身有父子关系——文档目录、分类筛选、组织架构——就得换一种控件，不然折出来的东西会很别扭。
10. 嵌套手风琴，每一层还带复选框
CSS 加少量 JS，面板可以一层套一层，每层里带复选框。这个组合最典型的用处是电商侧栏的筛选：品牌是一层，品牌下面的系列是一层，每一项前面一个勾选框。
做这类东西有个坑值得先说：点复选框和点面板标题是两个动作。如果事件没分开，用户想勾选却把面板收了，会很恼火。拿到代码先试这一下。
11. 树形目录：ul 和 li 就能撑起来
结构就是嵌套的 ul 和 li，黑色连接线勾出层级，点一下折叠展开。另外带了个调字号的功能，层级深的时候用得上。
选它而不是选第 10 款的理由是层级深度：两三层用嵌套手风琴还行，再深就该用树形结构了，因为树形的缩进和连接线能让人一眼看出自己在第几层，手风琴不行。文档站侧栏、文件管理器、分类管理后台，这是标准形态。
四、看着像折叠，其实是另一回事
最后两款经常被当成手风琴，但它们解决的不是「内容太多要收起来」，而是「几块内容摆在一起，让当前这块更大声」。分清楚这一点，省得你拿它去做 FAQ 然后发现手机上根本用不了。
12. 鼠标移上去才展开的卡片
纯 CSS / Flexbox 带骨架屏 键盘可达
未激活的卡片是灰度收缩状态，悬停后展开并还原全彩，描述文字从底部滑上来。灰度到全彩的落差拉得很开，一屏里哪张是激活态不用找。
它没有只顾好看：骨架屏加载、键盘可访问、触屏适配、减弱动画的偏好设置都做了，GPU 加速也调过。悬停类效果最常翻车的就是触屏——手机上没有「悬停」这个动作，不做处理就是一排永远灰着的卡片。这件事它考虑到了。
适合摄影作品集、团队介绍、产品功能页的主视觉。
13. 三列面板的团队介绍
默认三列，悬停哪一列哪一列放大展开、换图、显示介绍文案，另外两列同步收缩。无 JS，纯 CSS。
用在「核心团队三个人」这种场景刚好——三张脸都在屏幕上，想看谁移过去就行，比点进三个详情页轻快。人一多就别用了，每列被挤到只剩一条缝，谁是谁都看不出来。
最后说三个最常踩的坑
第一个是默认全关。FAQ 页一进去十条全是收着的，用户面对十行标题，一条内容都看不到，不少人直接就走了。通常把第一条默认展开就解决了，让人知道展开之后是什么样。
第二个是该用原生的地方非要写 JS。支持率前面说过了，独占展开靠一个 name 属性就有，键盘和读屏还是白送的。先试原生，真做不到再往上加，这个顺序能省掉很多后来才发现的无障碍问题。
第三个是把重要内容折起来。谷歌会收录折叠内容，但「能被收录」和「用户会去点」是两码事。价格、资质、联系方式这些访客本来就是冲着来的东西，别让人多点一下才看得见——折叠是用来收次要信息的，不是用来让页面显得干净的。
本文 13 款都在童哲网前端特效板块。第 11 款那种树形结构，更完整的侧栏用法在11 款导航栏与菜单效果那篇里；第 12、13 款那两张卡片的做法，则属于10 款卡片与布局效果的范围。要是你正在纠结「内容切换到底用选项卡还是轮播」，15 款轮播与切换效果是另一半答案。
