LAYOUT
折叠面板Accordion
在垂直空间内分段展示内容，一次只展开一个（或同时展开多个）。
效果预览
支持微信、支付宝、银联卡以及企业对公转账。
在「设置 → 账单」中点击「取消订阅」，当月仍可用至周期结束。
支持开具增值税普通发票和专用发票，申请后 3-5 个工作日寄出。
适合用在哪
FAQ、设置分组、长表单分组、商品详情参数、目录摘要。
不适合：内容必须同时可见才能对比的场景；层级超过两级的内容不要全塞进 Accordion，应改用 Tree 或多级导航。
和相近模式的区别
标签页Tabs
Tabs 是横向切换内容块；Accordion 是纵向折叠内容块，更适合 FAQ 和移动端纵向空间。
容易踩的坑
- 用 height:0→auto 做动画无法过渡，导致展开收起瞬间跳变。
- 每个项都用 div 而不是 button，键盘无法聚焦，读屏不知道可展开。
- 手风琴模式下用户想对比两项内容，展开新项自动收起旧项反而打断。
设计提示词 · Prompt
折叠面板（Accordion）：每个项由标题行 + 可折叠内容区组成。容器白底 + 1px 描边 + 圆角 12px；项之间用 1px 分隔线。标题行：左侧加粗标题，右侧箭头/加号图标。展开时箭头 rotate 180°。内容区用 grid-template-rows 0fr→1fr 做高度动画。手风琴模式：展开新项自动收起旧项；手风琴模式通过 JS 控制：展开新项时给兄弟项移除 is-open class，自由模式则保留多个 is-open。
Accordion: each item has a header row + collapsible content area. Container is white, 1px stroke, 12px radius, with 1px separators between items. Header: 15px bold title on the left, 12-14px arrow or plus icon on the right. The arrow rotates 180° (or plus becomes minus) when expanded. Content area animates with grid-template-rows 0fr→1fr over 200-260ms cubic-bezier(.32,.72,0,1), inner wrapper has min-height:0. Accordion mode auto-collapses other items; free mode allows multiple open items. Use button element with aria-expanded and aria-controls.
可复制 CSS
自包含的最小实现，粘贴到空白页面即可生效；类名可以按项目规范改名。
/* <div class="accordion"><div class="accordion__item"><button class="accordion__hd" aria-expanded="false"><b>标题</b><i>▼</i></button><div class="accordion__bd"><div class="accordion__wrap"><p>内容</p></div></div></div></div> */
.accordion { width: 100%; max-width: 560px; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; background: #fff; }
.accordion__item + .accordion__item { border-top: 1px solid #e5e7eb; }
.accordion__hd { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 16px; border: 0; background: transparent; cursor: pointer; font: 15px/1 system-ui, sans-serif; text-align: left; }
.accordion__hd i { transition: transform .2s ease; }
.accordion__item.is-open .accordion__hd i { transform: rotate(180deg); }
.accordion__bd { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s cubic-bezier(.32,.72,0,1); }
.accordion__item.is-open .accordion__bd { grid-template-rows: 1fr; }
.accordion__wrap { min-height: 0; overflow: hidden; }
.accordion__wrap p { margin: 0; padding: 0 16px 14px; color: #6b7280; font-size: 14px; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) {
.accordion__hd i { transition: none; }
.accordion__bd { transition: none; }
}
演示 HTML 结构
<div class="s d-center">
<div class="layout-acc">
<div class="layout-acc__item">
<button class="layout-acc__hd" type="button"><b>支持哪些支付方式？</b><i>▼</i></button>
<div class="layout-acc__bd"><p>支持微信、支付宝、银联卡以及企业对公转账。</p></div>
</div>
<div class="layout-acc__item is-open">
<button class="layout-acc__hd" type="button"><b>如何取消订阅？</b><i>▼</i></button>
<div class="layout-acc__bd"><p>在「设置 → 账单」中点击「取消订阅」，当月仍可用至周期结束。</p></div>
</div>
<div class="layout-acc__item">
<button class="layout-acc__hd" type="button"><b>是否提供发票？</b><i>▼</i></button>
<div class="layout-acc__bd"><p>支持开具增值税普通发票和专用发票，申请后 3-5 个工作日寄出。</p></div>
</div>
</div>
</div>
常见问题
为什么用 grid-template-rows 做动画而不是 height？
grid-template-rows 0fr→1fr 可以配合 inner wrapper 的 min-height:0 平滑过渡高度，而 height 从 auto 到固定值无法过渡。
Accordion 内容区能否嵌套其他交互元素？
可以，但要确保折叠时内部可聚焦元素不会被 Tab 命中；给内容区加 hidden 属性或 visibility:hidden 在折叠态时避免焦点泄露。
常见搭配
同一页面里经常和「折叠面板」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。