FAQ Accordion Generator

Build a clean collapsible FAQ section that works with keyboard navigation and does not require a large framework. Questions and answers remain in the HTML so they are available to users and crawlers.

Live preview

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Generated website component</title><style>body{margin:0;padding:20px;font:16px/1.6 system-ui;color:#172033}*{box-sizing:border-box}button,input,textarea,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #2563eb;outline-offset:3px}:root{--fg:#172033;--bg:#ffffff}.stg-box{padding:24px;border-radius:12px;border:1px solid #dbe3ee;background:var(--bg);color:var(--fg)}.stg-button{padding:10px 16px;border-radius:8px;border:1px solid #cbd5e1;background:#2563eb;color:#fff;text-decoration:none;display:inline-block}.stg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}.stg-muted{opacity:.8}.stg-card{padding:20px;border:1px solid #cbd5e1;border-radius:12px}.stg-controls{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}.stg-image{max-width:100%;height:160px;object-fit:contain}button:focus-visible,a:focus-visible{outline:3px solid #2563eb;outline-offset:3px}.stg-question{width:100%;padding:16px;text-align:left;background:transparent;border:0;border-bottom:1px solid #dbe3ee;color:inherit}.stg-faq [role=region]{padding:16px}
@media(prefers-reduced-motion:reduce){.stg-animated,.stg-animated *{animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important;position:static!important;white-space:normal!important}.stg-message,.stg-track{width:auto!important;max-width:100%!important;overflow-wrap:anywhere!important}.stg-viewport{height:auto!important;overflow:visible!important}.stg-track{flex-wrap:wrap!important}.stg-duplicate{display:none!important}}</style></head><body><section class="stg-faq stg-box"><div><h3><button class="stg-question" id="stg-question-0" aria-expanded="false" aria-controls="stg-answer-0">How does this work?</button></h3><div id="stg-answer-0" role="region" aria-labelledby="stg-question-0" hidden>Edit the questions, preview the answers, and copy your code.</div></div><div><h3><button class="stg-question" id="stg-question-1" aria-expanded="false" aria-controls="stg-answer-1">Can I customize it?</button></h3><div id="stg-answer-1" role="region" aria-labelledby="stg-question-1" hidden>Yes. Update the content and appearance.</div></div></section><script>document.querySelectorAll('.stg-question').forEach(button=>button.onclick=()=>{const open=button.getAttribute('aria-expanded')!=='true';document.querySelectorAll('.stg-question').forEach(b=>{b.setAttribute('aria-expanded','false');document.getElementById(b.getAttribute('aria-controls')).hidden=true});button.setAttribute('aria-expanded',String(open));document.getElementById(button.getAttribute('aria-controls')).hidden=!open;});</script></body></html>

What this generator does

Add, remove and reorder question/answer items.
Single-open or multiple-open modes.
Native, accessible button controls with aria-expanded.
Optional FAQPage JSON-LD only when it exactly matches visible content.

How to use

Add genuine questions and complete answers.
Choose whether one or several answers may stay open.
Customize borders, spacing, icons and typography.
Preview keyboard navigation.
Copy HTML/CSS/JS and optional matching JSON-LD.

Best practices

Do not add FAQ structured data for content that is not visible on the page.
Keep answers self-contained and useful even when read out of context.

Frequently asked questions

Does an FAQ accordion automatically improve rankings?

No. The main benefit is clearer information and easier navigation; structured data does not guarantee a special search result.

Can multiple answers stay open?

Yes. Choose Multiple Open mode.

Related tools & guides

Schema Markup Generator

Generate JSON-LD for common structured-data types and validate required fields before copying. Use only markup that matches visible page content.

Table of Contents Generator

Generate a clickable table of contents from HTML or Markdown headings. Choose heading levels, create stable IDs, preview the hierarchy and copy HTML or Markdown.

How to Create Scrolling Text with HTML and CSS

Learn how modern scrolling text works with CSS animation, how to control direction and speed, and when to use a generator instead of hand-written code.