CARRD TEMPLATES

How it works

Contact

CARRD TEMPLATES

Back to tools

FREE WEBSITE TOOL

Build an FAQ accordion. Keep it forever.

Add your questions and answers, customize the design, then copy one self-contained block of HTML, CSS, and JavaScript. No account, database, or monthly bill.

✓

No account

✓

No tracking

✓

No dependencies

01Add your questions

02Style the live preview

03Copy the finished code

Your FAQs3 / 8

FAQ 1

QuestionAnswer

FAQ 2

QuestionAnswer

FAQ 3

QuestionAnswer

Live preview● Updates instantly

Explain what customers receive, what the process includes, and any important limits here.

Theme

Columns

Open items

Icon

Accent

Text

Block bg

Item bg

Block corners

16px

Item corners

12px

Your ready-to-use codeHTML + CSS + JavaScript in one block

<!-- Free FAQ accordion by CarrdTemplates.com -->
<div class="ct-faq" data-ct-faq data-multiple="false" data-icon="right" style="--accent:rgb(46, 160, 255);--text:#FFFFFF;--block:#151515;--item:#242424;--columns:1;--block-radius:16px;--item-radius:12px">
    <div class="ct-faq-item is-open">
      <button class="ct-faq-question" type="button" aria-expanded="true">
        <span>What is included in your service?</span><span class="ct-faq-icon" aria-hidden="true"></span>
      </button>
      <div class="ct-faq-answer"><div>Explain what customers receive, what the process includes, and any important limits here.</div></div>
    </div>
    <div class="ct-faq-item">
      <button class="ct-faq-question" type="button" aria-expanded="false">
        <span>How long does it take?</span><span class="ct-faq-icon" aria-hidden="true"></span>
      </button>
      <div class="ct-faq-answer"><div>Add a clear, realistic timeline so visitors know what to expect before they contact you.</div></div>
    </div>
    <div class="ct-faq-item">
      <button class="ct-faq-question" type="button" aria-expanded="false">
        <span>Can I customize this accordion?</span><span class="ct-faq-icon" aria-hidden="true"></span>
      </button>
      <div class="ct-faq-answer"><div>Yes. Change the content, colors, spacing, corners, and behavior, then copy the finished code.</div></div>
    </div>
</div>
<style>
.ct-faq[data-ct-faq]{font-family:Inter,Arial,sans-serif;width:100%;box-sizing:border-box;padding:16px;background:var(--block);border:1px solid rgba(127,127,127,.25);border-radius:var(--block-radius);color:var(--text);display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));gap:10px}
.ct-faq[data-ct-faq] *{box-sizing:border-box}
.ct-faq[data-ct-faq] .ct-faq-item{overflow:hidden;background:var(--item);border:1px solid rgba(127,127,127,.25);border-radius:var(--item-radius);margin:0;align-self:start}
.ct-faq[data-ct-faq] .ct-faq-item:last-child{margin-bottom:0}
.ct-faq[data-ct-faq] .ct-faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px;border:0;background:transparent;color:inherit;font:600 17px/1.35 Inter,Arial,sans-serif;text-align:left;cursor:pointer}
.ct-faq[data-ct-faq][data-icon="left"] .ct-faq-question{flex-direction:row-reverse}
.ct-faq[data-ct-faq] .ct-faq-icon{flex:0 0 18px;width:18px;height:18px;position:relative}
.ct-faq[data-ct-faq] .ct-faq-icon:before,.ct-faq[data-ct-faq] .ct-faq-icon:after{content:"";position:absolute;left:1px;top:8px;width:16px;height:2px;border-radius:2px;background:var(--accent);transition:transform .22s ease}
.ct-faq[data-ct-faq] .ct-faq-icon:after{transform:rotate(90deg)}
.ct-faq[data-ct-faq] .is-open .ct-faq-icon:after{transform:rotate(0)}
.ct-faq[data-ct-faq] .ct-faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.ct-faq[data-ct-faq] .ct-faq-answer>div{overflow:hidden;padding:0 20px;color:color-mix(in srgb,var(--text) 72%,transparent);font:400 15px/1.65 Inter,Arial,sans-serif}
.ct-faq[data-ct-faq] .is-open .ct-faq-answer{grid-template-rows:1fr}
.ct-faq[data-ct-faq] .is-open .ct-faq-answer>div{padding-bottom:20px}
@media(max-width:520px){.ct-faq[data-ct-faq]{padding:10px;grid-template-columns:1fr}.ct-faq[data-ct-faq] .ct-faq-question{padding:16px;font-size:16px}.ct-faq[data-ct-faq] .ct-faq-answer>div{padding-left:16px;padding-right:16px}}
</style>
<script>
(()=>{const script=document.currentScript;const style=script&&script.previousElementSibling;const root=style&&style.previousElementSibling;if(!(root instanceof HTMLElement)||!root.matches(".ct-faq[data-ct-faq]"))return;root.querySelectorAll(".ct-faq-question").forEach(btn=>btn.addEventListener("click",()=>{const item=btn.parentElement;const opening=!item.classList.contains("is-open");if(root.dataset.multiple!=="true")root.querySelectorAll(".ct-faq-item").forEach(el=>{el.classList.remove("is-open");el.querySelector("button").setAttribute("aria-expanded","false")});item.classList.toggle("is-open",opening);btn.setAttribute("aria-expanded",String(opening))}))})();
</script>

ⓘ Paste the complete block into any HTML or Embed element. Your FAQs live inside the code itself; nothing is sent to or loaded from a server.

CARRD TEMPLATES

CARRD TEMPLATES

Build an FAQ accordion. Keep it forever.

Build an FAQ accordion. Keep it forever.

CARRD TEMPLATES

Website templates for businesses, built with Carrd.

Journal

Tools

How it works

Contact

© 2026 Carrd Templates

Trusted by 1400+ customers.

CARRD TEMPLATES

Website templates for businesses, built with Carrd.

Journal

Tools

How it works

Contact

© 2026 Carrd Templates

Trusted by 1400+ customers.

CARRD TEMPLATES

Website templates for businesses, built with Carrd.

Journal

Tools

How it works

Contact

© 2026 Carrd Templates

Trusted by 1327+ customers.