Chevron FAQ List
Overview
A minimal hairline-separated FAQ list built on native details: questions turn purple on hover, the arrow flips and changes color when open, and the answer slides down and fades in. One item open at a time, and it still collapses without JavaScript.
Taken from the page template Lingye Design Prompt Library Home. 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 Chevron FAQ List 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 chevron-faq-list
mcp › Use 8pt MCP to call get_component("chevron-faq-list")
Code
Source for Chevron FAQ List. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-cfq"><h3 class="cfq-h"><em>有疑问？</em>这里有答案。</h3><details open><summary>入门版真的不收钱吗？<i><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></summary><p>是的。入门版每天赠送一定点数，可以浏览全部公开资源并试用建站器，不需要绑定银行卡。</p></details><details><summary>棱页能配合哪些 AI 工具？<i><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></summary><p>常见的 AI 建站与编程工具都可以：复制提示词后粘贴进去即可，也可以通过 MCP 直接调用资源库。</p></details><details><summary>入门版和会员有什么区别？<i><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></summary><p>会员可以不限量复制提示词、查看模板与区块源码，并使用全部会员资源和 MCP。</p></details><details><summary>多久上新一次模板和区块？<i><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></summary><p>每周都会上新，会员可第一时间使用。</p></details><details><summary>“终身”具体指什么？<i><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></summary><p>一次付费后，只要棱页持续运营，你都能使用会员资源与后续更新。</p></details><details><summary>浏览器插件需要单独购买吗？<i><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></summary><p>不需要，插件包含在会员权益里。</p></details><details><summary>可以用在客户项目上吗？<i><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></summary><p>可以，个人与客户项目都能使用。</p></details><details><summary>可以和团队共用账号吗？<i><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></summary><p>一个账号仅限一人使用，团队方案请联系我们。</p></details><details><summary>退款政策是怎样的？<i><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></summary><p>开通后 7 天内如不满意，发邮件到 name@example.com 即可申请退款。</p></details><details><summary>还有其他问题，怎么联系你们？<i><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></summary><p>发邮件到 name@example.com，我们会尽快回复。</p></details></div>
.x-cfq{--ink:#0B0B0F;--pur:#7C3AED;--pur2:#A78BFA;--pur3:#EDE9FE;--mut:#6B6B76;--line:#E8E8EC;font-family:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-align:left}.x-cfq,.x-cfq *{box-sizing:border-box}.x-cfq a{color:inherit;text-decoration:none}.x-cfq button{font:inherit;cursor:pointer}.x-cfq{width:100%;max-width:640px;margin:0 auto;color:var(--ink);border-top:1px solid #E4E4E0}.x-cfq details{border-bottom:1px solid #EDEDE8}.x-cfq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-size:15px;font-weight:500;cursor:pointer;transition:color .2s}.x-cfq summary::-webkit-details-marker{display:none}.x-cfq summary:hover{color:var(--pur)}.x-cfq summary i{display:grid;place-items:center;color:#A1A1AA;transition:transform .3s,color .3s}.x-cfq details[open] summary i{transform:rotate(180deg);color:var(--pur)}.x-cfq p{margin:0;padding:0 32px 18px 0;font-size:14px;line-height:1.75;color:#52525B;animation:cfq-in .35s ease}@keyframes cfq-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion:reduce){.x-cfq *{animation:none!important;transition:none!important}}.x-cfq{max-width:none;padding:40px 5%;background-image:radial-gradient(rgba(16,16,24,.16) 1.1px,transparent 1.4px);background-size:18px 18px;background-position:center}.x-cfq{border-top:0}.x-cfq details{max-width:640px;margin:0 auto}.x-cfq details:first-of-type{border-top:1px solid #E4E4E0}.x-cfq .cfq-h{font-family:"Noto Serif SC",serif;font-size:46px;font-weight:400;text-align:center;margin:0 0 34px;letter-spacing:-.02em}.x-cfq .cfq-h em{color:#8A8A94}.x-cfq{width:1200px;max-width:100%;box-sizing:border-box}(root) => {
const items = [...root.querySelectorAll('details')];
const onT = (e) => { const d = e.currentTarget; if (d.open) items.forEach(o => { if (o !== d) o.open = false; }); };
items.forEach(d => d.addEventListener('toggle', onT));
return () => items.forEach(d => d.removeEventListener('toggle', onT));
}Subscribe to Builder to see the full source.See pricing