Soft FAQ Accordion
介绍
白色圆角问答条目纵向排列，点击后答案以高度过渡展开，右侧加号旋转成叉并变为绿色底，展开项加深投影；可同时展开多项。
拆自整页模板 潮引 获客智能体官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Soft FAQ Accordion 加进你的项目并换成你的配色。
适用场景
常见问题（FAQ）、折叠面板、可展开的说明和设置分组。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add soft-faq-accordion
mcp › 使用 8pt MCP 调用 get_component("soft-faq-accordion")
代码
Soft FAQ Accordion 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-sfa"><section class="cy-faq" id="faq"><div class="cy-wrap"><h2 class="cy-h2">常见问题</h2><div class="cy-faq__l"><div class="cy-fq is-open"><button type="button" aria-expanded="true">潮引是怎么工作的？<span class="cy-fq__ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14"/><path d="M5 12h14"/></svg></span></button><div class="cy-fq__a"><div><p>你粘贴网站后，智能体先读懂你的产品与目标客户，再从公开企业信息中筛出可能有需求的决策人，写好个性化邮件逐封发出；收到积极回复后，它会把会议约进你的日历。</p></div></div></div><div class="cy-fq"><button type="button" aria-expanded="false">它适合我的生意吗？<span class="cy-fq__ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14"/><path d="M5 12h14"/></svg></span></button><div class="cy-fq__a"><div><p>只要你的客户是企业或机构，并且能通过邮件联系到负责人，通常都值得一试。建议先用体验额度跑一小批，看真实回复再决定。</p></div></div></div><div class="cy-fq"><button type="button" aria-expanded="false">体验额度怎么领？为什么要绑卡？<span class="cy-fq__ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14"/><path d="M5 12h14"/></svg></span></button><div class="cy-fq__a"><div><p>注册后即可领取一笔体验额度。绑卡只用于防止滥用和额度用完后的续用，额度用完之前不会扣款。</p></div></div></div><div class="cy-fq"><button type="button" aria-expanded="false">怎么收费？<span class="cy-fq__ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14"/><path d="M5 12h14"/></svg></span></button><div class="cy-fq__a"><div><p>按实际发出的邮件计费，没有月费和最低消费，随时可以暂停。具体单价以价格页为准。</p></div></div></div><div class="cy-fq"><button type="button" aria-expanded="false">能面向哪些地区和语言？<span class="cy-fq__ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14"/><path d="M5 12h14"/></svg></span></button><div class="cy-fq__a"><div><p>可以按国家、地区和行业筛选目标公司，邮件会用对方常用的语言撰写。</p></div></div></div><div class="cy-fq"><button type="button" aria-expanded="false">邮件从谁的邮箱发出？会进垃圾箱吗？<span class="cy-fq__ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14"/><path d="M5 12h14"/></svg></span></button><div class="cy-fq__a"><div><p>由潮引为你准备并预热好的独立发信域名发出，与主域名隔离；系统持续监测送达情况并自动调整发送节奏。</p></div></div></div><div class="cy-fq"><button type="button" aria-expanded="false">线索从哪里来？<span class="cy-fq__ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14"/><path d="M5 12h14"/></svg></span></button><div class="cy-fq__a"><div><p>来自公开可查的企业与职位信息，经过去重、核验后才会进入你的名单。</p></div></div></div></div></div></section></div>
.x-sfa{--bg:#F6F5F3;--ink:#111111;--acc:#0D9467;--chip:#ECEBE9;--card:#FFFFFF;--mut:#8E8D8A;--sub:#5F5E5B;--line:#E7E5E1;--tile:#F4F4F3;
--sans:"Inter","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;--ease:cubic-bezier(.22,1,.36,1)}.x-sfa *,.x-sfa *::before,.x-sfa *::after{box-sizing:border-box;margin:0;padding:0}.x-sfa{width:100%;text-align:left;font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip}.x-sfa a{color:inherit;text-decoration:none}.x-sfa button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-sfa input{font:inherit;color:inherit}.x-sfa .cy-wrap{max-width:1080px;margin:0 auto;padding:0 24px}.x-sfa .cy-h2{font-size:clamp(28px,3vw,38px);font-weight:500;letter-spacing:-.02em;line-height:1.2;text-align:center}.x-sfa .cy-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 24px;border-radius:10px;background:#161616;color:#fff;font-size:15px;font-weight:500;transition:transform .2s var(--ease),background .2s}.x-sfa .cy-btn:hover{background:#2b2b2b}.x-sfa .cy-btn:active{transform:scale(.98)}.x-sfa .cy-btn svg{width:16px;height:16px;transition:transform .25s var(--ease)}.x-sfa .cy-btn:hover svg{transform:translateX(3px)}.x-sfa .cy-logo{display:inline-flex;align-items:center;gap:8px;font-size:20px;font-weight:600;letter-spacing:.02em}.x-sfa .cy-logo__m{width:26px;height:26px}.x-sfa .cy-tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:999px;background:var(--chip);color:var(--sub);font-size:11px;font-weight:500}@media (prefers-reduced-motion:reduce){.x-sfa *,.x-sfa *::before,.x-sfa *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.x-sfa .cy-m{display:none}}.x-sfa .cy-faq{padding:40px 0 100px}.x-sfa .cy-faq__l{max-width:720px;margin:40px auto 0;display:grid;gap:10px}.x-sfa .cy-fq{border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:box-shadow .3s}.x-sfa .cy-fq.is-open{box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 28px -18px rgba(0,0,0,.2)}.x-sfa .cy-fq button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:18px 20px;text-align:left;font-size:15.5px;font-weight:500}.x-sfa .cy-fq__ic{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--tile);transition:transform .35s var(--ease),background .3s,color .3s}.x-sfa .cy-fq__ic svg{width:16px;height:16px}.x-sfa .cy-fq.is-open .cy-fq__ic{transform:rotate(45deg);background:var(--acc);color:#fff}.x-sfa .cy-fq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}.x-sfa .cy-fq.is-open .cy-fq__a{grid-template-rows:1fr}.x-sfa .cy-fq__a>div{overflow:hidden}.x-sfa .cy-fq__a p{padding:0 20px 18px;font-size:14.5px;line-height:1.7;color:var(--sub)}@media (max-width:760px){.x-sfa .cy-faq{padding:20px 0 64px}.x-sfa .cy-faq__l{margin-top:28px}.x-sfa .cy-fq button{padding:16px}.x-sfa .cy-fq__a p{padding:0 16px 16px}}.x-sfa .cy-faq{min-height:min(860px,96vh);display:flex;flex-direction:column;justify-content:center;padding:30px 0}(root) => {
const el = (root.matches && root.matches('.cy-faq')) ? root : root.querySelector('.cy-faq');
if (!el) return;
const items = [...el.querySelectorAll('.cy-fq')];
const offs = items.map((it) => {
const b = it.querySelector('button');
const on = () => { const o = it.classList.toggle('is-open'); b.setAttribute('aria-expanded', String(o)); };
b.addEventListener('click', on);
return () => b.removeEventListener('click', on);
});
return () => offs.forEach((f) => f());
}订阅 Builder 查看完整源码。查看价格