No-JS FAQ accordion with details and summary
A pure HTML accordion built on details and summary with a rotating chevron, grouped open state and zero JavaScript.
Tailwind CSSLayoutsfaqaccordiondetailsno-js
Live preview
Code
<section class="mx-auto max-w-2xl px-4 py-12" aria-labelledby="faq-title">
<h2 id="faq-title" class="text-2xl font-bold text-slate-900">Frequently asked questions</h2>
<div class="mt-6 divide-y divide-slate-200 rounded-xl border border-slate-200">
<!-- same name attribute = only one item open at a time -->
<details name="faq" class="group p-5" open>
<summary class="flex cursor-pointer list-none items-center justify-between gap-4 font-medium text-slate-900 [&::-webkit-details-marker]:hidden">
How do I reset my workspace?
<svg class="size-5 shrink-0 text-slate-400 transition-transform group-open:rotate-180" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M5.2 7.6 10 12.4l4.8-4.8 1.4 1.4L10 15.2 3.8 9l1.4-1.4Z"/></svg>
</summary>
<p class="mt-3 text-slate-600">Open Settings, choose Workspace, then select Reset. Your members stay in place.</p>
</details>
<details name="faq" class="group p-5">
<summary class="flex cursor-pointer list-none items-center justify-between gap-4 font-medium text-slate-900 [&::-webkit-details-marker]:hidden">
Can I export my data?
<svg class="size-5 shrink-0 text-slate-400 transition-transform group-open:rotate-180" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M5.2 7.6 10 12.4l4.8-4.8 1.4 1.4L10 15.2 3.8 9l1.4-1.4Z"/></svg>
</summary>
<p class="mt-3 text-slate-600">Yes. Use Export in the Data page to download a CSV or JSON archive.</p>
</details>
<details name="faq" class="group p-5">
<summary class="flex cursor-pointer list-none items-center justify-between gap-4 font-medium text-slate-900 [&::-webkit-details-marker]:hidden">
Where can I get help?
<svg class="size-5 shrink-0 text-slate-400 transition-transform group-open:rotate-180" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M5.2 7.6 10 12.4l4.8-4.8 1.4 1.4L10 15.2 3.8 9l1.4-1.4Z"/></svg>
</summary>
<p class="mt-3 text-slate-600">Visit the help centre or open a ticket from your dashboard.</p>
</details>
</div>
</section>
How it works
What it solves
Accordions are usually scripted, which means extra code, ARIA bookkeeping and a broken experience when the script fails. The native details element already provides toggling, keyboard support and screen reader semantics, so this version ships none of that logic.
How it works
Each question is a details with a summary as the clickable header. Tailwind's group class on details and the group-open: variant react to the browser's open attribute, so the chevron rotates with group-open:rotate-180 and the border colour changes without any script. The default marker is hidden with list-none and the [&::-webkit-details-marker]:hidden arbitrary variant. The answer is a normal paragraph, so search engines and in-page find can reach it, and printing shows content if you add the open attribute.
Adapting it
Add open to the first item to show it by default. To allow only one open at a time, give every details the same name attribute; modern browsers then close the others automatically, still without JavaScript. Use FAQPage structured data next to it for search results.
Pitfalls
- Find-in-page expands closed items in Chromium but not everywhere, so keep key answers short.
- Do not put block level interactive content inside
summary. - Animating height needs extra CSS; the plain version simply snaps.
How to use it
- Paste
faq.htmlinto any Tailwind 4 page; no script is required. - Edit questions and answers; keep one
detailsper pair. - Keep the shared
name="faq"for exclusive behaviour, or remove it to allow many open. - Add
opento any item you want expanded on load.
Licence: DEV3 Snippet Licence. Free to use, change and ship in personal and commercial projects. Attribution is appreciated, not required. Please do not redistribute snippets as a collection.