Two Column FAQ
介绍
双栏排布的常见问题手风琴：十个浅灰圆角问答条，左右两列各自排列，点击展开答案并把加号变为关闭符号，同一时间只展开一条，展开项底色变浅蓝。
拆自整页模板 随贴 Mac 剪贴板历史官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Two Column FAQ 加进你的项目并换成你的配色。
适用场景
常见问题（FAQ）、折叠面板、可展开的说明和设置分组。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add two-column-faq
mcp › 使用 8pt MCP 调用 get_component("two-column-faq")
代码
Two Column FAQ 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-tcf"><div class="x-tcf__head"><h2>常见问题</h2><p>开始使用前，关于隐私、兼容和数据存储的那些事</p></div><div class="x-tcf__cols"><div class="x-tcf__col"><div class="x-tcf__item"><button type="button" class="x-tcf__q" aria-expanded="false" aria-controls="x-tcf-a0"><span class="x-tcf__ic"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg></span>随贴是什么？</button><div class="x-tcf__a" id="x-tcf-a0"><p>一款 Mac 上的剪贴板历史工具：你复制过的文字、链接、图片和截图都会被留下，并按类型和来源自动整理。</p></div></div><div class="x-tcf__item"><button type="button" class="x-tcf__q" aria-expanded="false" aria-controls="x-tcf-a1"><span class="x-tcf__ic"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg></span>数据存在哪里？</button><div class="x-tcf__a" id="x-tcf-a1"><p>默认只存在你自己的电脑上，不会上传。开启同步后，只在你自己的设备之间传递。</p></div></div><div class="x-tcf__item"><button type="button" class="x-tcf__q" aria-expanded="false" aria-controls="x-tcf-a2"><span class="x-tcf__ic"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg></span>支持哪些内容？</button><div class="x-tcf__a" id="x-tcf-a2"><p>文字、链接、图片、截图、颜色、文件和代码片段都可以，常用的内容还能固定到顶部。</p></div></div><div class="x-tcf__item"><button type="button" class="x-tcf__q" aria-expanded="false" aria-controls="x-tcf-a3"><span class="x-tcf__ic"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg></span>可以搜索历史吗？</button><div class="x-tcf__a" id="x-tcf-a3"><p>可以，输入关键词即可搜索，截图和图片里的文字也会被识别后一起搜到。</p></div></div><div class="x-tcf__item"><button type="button" class="x-tcf__q" aria-expanded="false" aria-controls="x-tcf-a4"><span class="x-tcf__ic"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg></span>有手机版吗？</button><div class="x-tcf__a" id="x-tcf-a4"><p>有，手机版可以用随贴键盘在任何应用里粘贴，也能在主屏小组件里取最近的内容。</p></div></div></div><div class="x-tcf__col"><div class="x-tcf__item"><button type="button" class="x-tcf__q" aria-expanded="false" aria-controls="x-tcf-a5"><span class="x-tcf__ic"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg></span>会识别敏感信息吗？</button><div class="x-tcf__a" id="x-tcf-a5"><p>会，密码、验证码等敏感内容可以自动跳过或在一段时间后清除。</p></div></div><div class="x-tcf__item"><button type="button" class="x-tcf__q" aria-expanded="false" aria-controls="x-tcf-a6"><span class="x-tcf__ic"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg></span>能暂停记录吗？</button><div class="x-tcf__a" id="x-tcf-a6"><p>可以，从菜单栏一键暂停，也能为指定应用设置永不记录。</p></div></div><div class="x-tcf__item"><button type="button" class="x-tcf__q" aria-expanded="false" aria-controls="x-tcf-a7"><span class="x-tcf__ic"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg></span>是订阅制吗？</button><div class="x-tcf__a" id="x-tcf-a7"><p>不是，一次购买后终身使用，后续版本更新也包含在内。</p></div></div><div class="x-tcf__item"><button type="button" class="x-tcf__q" aria-expanded="false" aria-controls="x-tcf-a8"><span class="x-tcf__ic"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg></span>授权台数怎么算？</button><div class="x-tcf__a" id="x-tcf-a8"><p>按设备计算，购买几台就可以在几台 Mac 上同时激活使用。</p></div></div><div class="x-tcf__item"><button type="button" class="x-tcf__q" aria-expanded="false" aria-controls="x-tcf-a9"><span class="x-tcf__ic"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg></span>购买后怎么安装？</button><div class="x-tcf__a" id="x-tcf-a9"><p>完成购买后会收到下载链接和授权码，打开应用填入即可。</p></div></div></div></div></div>
.x-tcf{box-sizing:border-box;width:100%;max-width:1000px;margin:0 auto;padding:8px 8px;color:#0b0b0f;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased}.x-tcf *,.x-tcf *::before,.x-tcf *::after{box-sizing:border-box}.x-tcf svg{width:1em;height:1em;flex:none}.x-tcf__head{text-align:center}.x-tcf__head h2{margin:0;font-size:clamp(32px,4.4vw,48px);line-height:1.15;font-weight:800}.x-tcf__head p{margin:12px auto 0;max-width:460px;font-size:15px;line-height:1.7;color:#6b6f7a}.x-tcf__cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start;margin-top:34px}.x-tcf__col{display:grid;gap:10px}.x-tcf__item{border-radius:18px;background:#f3f3f5;transition:background .25s}.x-tcf__item.is-open{background:#eaeef7}.x-tcf__q{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:12px 16px;border:0;background:transparent;color:inherit;font:inherit;font-size:14.5px;font-weight:600;text-align:left;cursor:pointer}.x-tcf__ic{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:#fff;font-size:13px;transition:transform .35s cubic-bezier(.2,.8,.2,1),background .25s,color .25s}.x-tcf__item.is-open .x-tcf__ic{transform:rotate(45deg);background:#0b0b0f;color:#fff}.x-tcf__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1)}.x-tcf__a p{min-height:0;margin:0;padding:0 18px 0 52px;overflow:hidden;font-size:14px;line-height:1.75;color:#5f6370}.x-tcf__item.is-open .x-tcf__a{grid-template-rows:1fr}.x-tcf__item.is-open .x-tcf__a p{padding-bottom:16px}@media (max-width:720px){.x-tcf__cols{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.x-tcf__a,.x-tcf__ic,.x-tcf__item{transition:none}}(root) => {
const items = [...root.querySelectorAll('.x-tcf__item')];
const onClick = e => {
const q = e.target.closest('.x-tcf__q');
if (!q) return;
const it = q.parentElement;
const open = !it.classList.contains('is-open');
items.forEach(x => { x.classList.remove('is-open'); x.querySelector('.x-tcf__q').setAttribute('aria-expanded', 'false'); });
if (open) { it.classList.add('is-open'); q.setAttribute('aria-expanded', 'true'); }
};
root.addEventListener('click', onClick);
items[0].classList.add('is-open');
…订阅 Builder 查看完整源码。查看价格