Accordion
介绍
单开模式的折叠面板，加号旋转成叉，内容淡入；键盘可操作。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Accordion 加进你的项目并换成你的配色。
适用场景
常见问题（FAQ）、折叠面板、可展开的说明和设置分组。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add accordion
mcp › 使用 8pt MCP 调用 get_component("accordion")
代码
Accordion 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-acc"> <div class="x-acc__item open"><button type="button" aria-expanded="true">什么是 8pt 网格？<i></i></button><div class="x-acc__panel"><div><p>所有尺寸都取 8 的倍数，界面节奏统一。</p></div></div></div> <div class="x-acc__item"><button type="button" aria-expanded="false">为什么是 8？<i></i></button><div class="x-acc__panel"><div><p>能被常见屏幕倍率整除，缩放后不出现半像素。</p></div></div></div> <div class="x-acc__item"><button type="button" aria-expanded="false">小于 8 怎么办？<i></i></button><div class="x-acc__panel"><div><p>图标与文字微调可用 4 作为半步。</p></div></div></div> </div>
.x-acc{width:min(420px,100%);max-width:100%;color:var(--d-fg,#fff)}
.x-acc__item{border-bottom:1px solid var(--d-line,rgba(255,255,255,.1))}
.x-acc__item button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 2px;border:0;background:transparent;color:inherit;font:600 15px/1.3 var(--d-font,system-ui,sans-serif);text-align:left;cursor:pointer}
.x-acc__item button i{position:relative;width:12px;height:12px;flex:none;transition:transform .35s cubic-bezier(.2,.9,.2,1)}
.x-acc__item button i::before,.x-acc__item button i::after{content:"";position:absolute;left:0;top:5px;width:12px;height:2px;border-radius:2px;background:currentColor}
.x-acc__item button i::after{transform:rotate(90deg)}
.x-acc__item.open button i{transform:rotate(45deg)}
.x-acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.2,.9,.2,1)}
.x-acc__panel>div{overflow:hidden}
.x-acc__panel p{margin:0;padding:0 2px 16px;font:14px/1.65 var(--d-font,system-ui,sans-serif);color:var(--d-muted,#a0a0ab);opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .35s}
.x-acc__item.open .x-acc__panel{grid-template-rows:1fr}
.x-acc__item.open .x-acc__panel p{opacity:1;transform:none}const init = (root) => {
const items = root.querySelectorAll('.x-acc__item');
items.forEach(it => it.querySelector('button').addEventListener('click', () => {
const open = !it.classList.contains('open');
items.forEach(o => { o.classList.remove('open'); o.querySelector('button').setAttribute('aria-expanded', 'false'); });
if (open) { it.classList.add('open'); it.querySelector('button').setAttribute('aria-expanded', 'true'); }
}));
};订阅 Builder 查看完整源码。查看价格