Native Details Accordion
An FAQ/accordion built on the native <details>/<summary> disclosure element — real keyboard support, real screen-reader semantics, and it fully opens/closes with zero CSS and zero JavaScript on every browser ever made. The only thing added here is an animated open/close instead of an instant snap, using two real, current, cross-checked-via-WebSearch platform features stacked together: the ::details-content pseudo-element (which finally lets you select and style the collapsible content box without wrapping it in an extra div — shipped in Chrome/Edge since Chrome 131, November 2024, and Firefox since Firefox 143, but Safari's implementation is still partial, so per MDN's own Baseline-compatibility glossary this pair is NOT yet Baseline 'newly available') and interpolate-size: allow-keywords (which is what actually lets height transition from 0 to auto instead of jump-cutting — Chromium-only, Chrome/Edge since Chrome 129, September 2024, still unsupported in Firefox or Safari stable as of this run). Honest scope: the smooth slide only plays in Chromium today; every other engine (and any future one) just gets the plain native instant toggle — not broken, not empty, just un-animated, because <details> never depended on this CSS to function in the first place. (Vanilla example: live iframe preview + HTML/CSS tabs — click a question to expand it.)
<div class="nda-wrap">
<details class="nda-item" open>
<summary class="nda-q">What's included in the $999 tier?</summary>
<div class="nda-a">Five real pages, mobile-responsive, one round of revisions — no template store-bought look.</div>
</details>
<details class="nda-item">
<summary class="nda-q">How long does a build take?</summary>
<div class="nda-a">Most launches ship 5–7 business days after final content handoff.</div>
</details>
<details class="nda-item">
<summary class="nda-q">Does this need JavaScript to work?</summary>
<div class="nda-a">No — this is the native <details> element. The animation is the only enhancement; the disclosure itself never needed it.</div>
</details>
</div>How it works
Native Details Accordion is a hand-built card component in plain HTML and CSS — no React, no Tailwind, no framework at all. Paste it into any site as-is and it stays performant on real devices. It's free — copy the code above and ship it.
← Browse all components