Section
Accordion FAQ
Accessible single-open accordion FAQ.
- Section
- Vanilla
- HTML
- MIT
Preview
Live section
No interactive preview for this section.
Install it with the CLI below, or read the implementation on this page.
Install
Add to your project
npx devsnips add Vanilla/Sections/FAQ/faq-accordion Vanilla/Sections/FAQ/faq-accordion <!-- Snippet Name: Accordion FAQ | Family: FAQ | Description: Accessible single-open accordion FAQ. | Author: DevSnips Contributors | Usage: Copy the .nb section into your page. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accordion FAQ | DevSnips</title>
<meta name="description" content="Neo-brutalist vanilla HTML/CSS/JS section: faq-accordion. Copy, customize, ship.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style> /* ---- Neo-Brutalist design tokens ---- */
:root{
--bg:#fbfbf9; --surface:#ffffff; --foreground:#0a0a0a; --muted:#525252;
--border:#0a0a0a; --primary:#4f46e5; --primary-fg:#ffffff;
--accent:#facc15; --pink:#ec4899; --lime:#a3e635; --cyan:#22d3ee;
--radius:6px; --radius-lg:10px;
--shadow:4px 4px 0 var(--border); --shadow-lg:8px 8px 0 var(--border);
--ring:0 0 0 3px #fff, 0 0 0 6px var(--primary);
--container:1200px; --gutter:20px;
--fs-h1:clamp(2.4rem,6vw,4.25rem); --fs-h2:clamp(1.9rem,4vw,2.9rem);
--fs-h3:clamp(1.25rem,2.4vw,1.6rem); --fs-lead:clamp(1.05rem,2vw,1.25rem);
--ff:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
:root{ --bg:#0a0a0a; --surface:#151515; --foreground:#fafafa; --muted:#a3a3a3;
--border:#fafafa; --ring:0 0 0 3px #000, 0 0 0 6px var(--primary); }
}
/* ---- base layout + components ---- */
*{box-sizing:border-box}
.nb{font-family:var(--ff);background:var(--bg);color:var(--foreground);
line-height:1.6;-webkit-font-smoothing:antialiased;margin:0}
.nb .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.nb section{position:relative;padding-block:clamp(56px,9vw,120px)}
.nb h1,.nb h2,.nb h3,.nb h4{font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0}
.nb h1{font-size:var(--fs-h1)} .nb h2{font-size:var(--fs-h2)} .nb h3{font-size:var(--fs-h3)}
.nb p{margin:0} .nb a{color:inherit}
.nb .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;
font-weight:700;text-transform:uppercase;letter-spacing:.14em;
border:2px solid var(--border);background:var(--surface);padding:6px 12px;
border-radius:999px;box-shadow:var(--shadow)}
.nb .lead{font-size:var(--fs-lead);color:var(--muted);max-width:62ch}
.nb .muted{color:var(--muted)}
.nb .center{text-align:center;margin-inline:auto}
.nb .grid{display:grid;gap:var(--gutter)}
.nb .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
font:inherit;font-weight:700;font-size:.98rem;line-height:1;cursor:pointer;
text-decoration:none;border:3px solid var(--border);border-radius:var(--radius);
padding:14px 22px;background:var(--primary);color:var(--primary-fg);
box-shadow:var(--shadow);transition:transform .12s ease,box-shadow .12s ease,background .12s}
.nb .btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
.nb .btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border)}
.nb .btn.outline{background:var(--surface);color:var(--foreground)}
.nb .btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.nb .btn.ghost:hover{box-shadow:var(--shadow);border-color:var(--border);transform:translate(-2px,-2px)}
.nb .btn.accent{background:var(--accent);color:#0a0a0a}
.nb .card{background:var(--surface);border:3px solid var(--border);border-radius:var(--radius);
box-shadow:var(--shadow);padding:24px;transition:transform .14s ease,box-shadow .14s ease}
.nb .card.hover:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-lg)}
.nb .badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;
text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--border);
padding:4px 10px;border-radius:999px;background:var(--surface)}
.nb :focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}
.nb .skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#000;
padding:10px 16px;border:2px solid var(--border);z-index:50;font-weight:700}
.nb .skip:focus{left:8px}
.nb .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
@media (prefers-reduced-motion:reduce){
.nb *,.nb *::before,.nb *::after{animation-duration:.001ms!important;
transition-duration:.001ms!important;animation-iteration-count:1!important}
}
.fq .head{text-align:center;margin-bottom:30px}.fq .head h2{margin:12px 0 8px}
.fq .wrap{max-width:780px;margin-inline:auto;display:grid;gap:12px}
.fq .item{border:3px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
.fq .q{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;font:inherit;font-weight:700;text-align:left;background:none;border:0;padding:18px;cursor:pointer}
.fq .q .pm{width:28px;height:28px;flex:none;border:2px solid var(--border);border-radius:8px;display:grid;place-items:center;font-size:1.2rem;background:var(--bg);transition:transform .2s}
.fq .item.open .pm{transform:rotate(45deg);background:var(--accent)}
.fq .panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.fq .panel>div{overflow:hidden}
.fq .item.open .panel{grid-template-rows:1fr}
.fq .panel p{padding:0 18px 18px;color:var(--muted);margin:0}</style>
</head>
<body class="nb">
<a class="skip" href="#main">Skip to content</a>
<section class="fq" aria-labelledby="fq-title" data-faq>
<div class="container">
<div class="head"><span class="eyebrow">FAQ</span><h2 id="fq-title">Questions, answered.</h2></div>
<div class="wrap">
<div class="item"><button class="q" type="button" aria-expanded="false">Is there a free plan?<span class="pm" aria-hidden="true">+</span></button><div class="panel"><div><p>Yes — Starter is free forever for small projects and side hustles.</p></div></div></div>
<div class="item"><button class="q" type="button" aria-expanded="false">Can I cancel anytime?<span class="pm" aria-hidden="true">+</span></button><div class="panel"><div><p>Absolutely. No contracts; cancel from settings in two clicks.</p></div></div></div>
<div class="item"><button class="q" type="button" aria-expanded="false">Do you offer SSO?<span class="pm" aria-hidden="true">+</span></button><div class="panel"><div><p>SAML SSO is included on Scale and available as an add-on on Growth.</p></div></div></div>
<div class="item"><button class="q" type="button" aria-expanded="false">How is my data secured?<span class="pm" aria-hidden="true">+</span></button><div class="panel"><div><p>AES-256 at rest, TLS 1.3 in transit, SOC2 Type II audited.</p></div></div></div>
</div>
</div>
</section>
<script>
(function(){
var sec=document.querySelector('[data-faq]');if(!sec)return;
var items=[].slice.call(sec.querySelectorAll('.item'));
items.forEach(function(it){
var btn=it.querySelector('.q');
btn.addEventListener('click',function(){
var open=it.classList.contains('open');
items.forEach(function(o){o.classList.remove('open');o.querySelector('.q').setAttribute('aria-expanded','false')});
if(!open){it.classList.add('open');btn.setAttribute('aria-expanded','true')}
});
});
})();</script>
</body>
</html># Accordion FAQ
Accessible single-open accordion FAQ.
**Technology:** Vanilla HTML/CSS/JS
**Category:** sections / faq
**Design:** Neo-Brutalist (flat colors, hard shadows, bold borders)
**Responsive:** Mobile-first (320px → 1920px)
**Dark mode:** via `prefers-color-scheme`
**Tags:** faq, accordion
**Features:** keyboard, aria-expanded, grid animation
## Usage
1. Copy the contents of `code.html` into your page.
2. The section is self-contained (inline CSS + JS). No build step.
3. Tweak the CSS variables in `:root` to rebrand. 113 lines UTF-8 · LF · Spaces: 2
Continue browsing