Soft FAQ Accordion
Overview
White rounded FAQ items stacked vertically: clicking opens the answer with a height transition, the plus on the right rotates into a cross on a green background and the open item gets a deeper shadow. Several items can be open at once.
Taken from the page template Chaoyin Lead-Gen Agent Website. Use it on its own, or combine it with the other components from the same template to rebuild the full page.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Soft FAQ Accordion to your project in your colors.
Where to use it
FAQs, accordions, expandable explanations and grouped settings.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add soft-faq-accordion
mcp › Use 8pt MCP to call get_component("soft-faq-accordion")
Code
Source for Soft FAQ Accordion. Motion uses only transform and opacity and respects the Reduce motion setting.
<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());
}Subscribe to Builder to see the full source.See pricing