4 Tailwind2 with JSPublished 2026-10-05Free · no sign-up
Six FAQ sections in Tailwind: a native details list, an exclusive accordion that keeps one answer open, plus icons that turn into minus signs, an accordion with animated height, a FAQ with a search box and a numbered dark version.
The simplest accessible FAQ: native details and summary elements, which open and close with no script and work with keyboard and screen readers out of the box. group-open:rotate-180 turns the chevron.
Give every details element the same name attribute and the browser keeps only one open at a time, an exclusive accordion with no JavaScript. In older browsers they simply open independently.
View code
<div class="grid w-full max-w-sm gap-2">
<details name="twfq2" class="group rounded-xl bg-white p-4 shadow-sm ring-1 ring-slate-200 open:ring-2 open:ring-teal-600" open><summary class="flex cursor-pointer list-none items-center justify-between font-semibold text-slate-900 focus-visible:outline-none [&::-webkit-details-marker]:hidden">Is there a free trial?<span aria-hidden="true" class="text-teal-700 group-open:hidden">+</span><span aria-hidden="true" class="hidden text-teal-700 group-open:inline">−</span></summary><p class="mt-2 text-sm text-slate-600">Yes, 14 days with every feature.</p></details>
<details name="twfq2" class="group rounded-xl bg-white p-4 shadow-sm ring-1 ring-slate-200 open:ring-2 open:ring-teal-600"><summary class="flex cursor-pointer list-none items-center justify-between font-semibold text-slate-900 focus-visible:outline-none [&::-webkit-details-marker]:hidden">Do I need a card?<span aria-hidden="true" class="text-teal-700 group-open:hidden">+</span><span aria-hidden="true" class="hidden text-teal-700 group-open:inline">−</span></summary><p class="mt-2 text-sm text-slate-600">No card is needed to start.</p></details>
<details name="twfq2" class="group rounded-xl bg-white p-4 shadow-sm ring-1 ring-slate-200 open:ring-2 open:ring-teal-600"><summary class="flex cursor-pointer list-none items-center justify-between font-semibold text-slate-900 focus-visible:outline-none [&::-webkit-details-marker]:hidden">Can I cancel any time?<span aria-hidden="true" class="text-teal-700 group-open:hidden">+</span><span aria-hidden="true" class="hidden text-teal-700 group-open:inline">−</span></summary><p class="mt-2 text-sm text-slate-600">Yes, from your account page.</p></details>
</div>
Each question shows a plus drawn from two bars; opening it collapses the vertical bar with group-open:scale-y-0, leaving a minus. The icon is pure CSS and hidden from screen readers, which hear the open state from details.
An accordion that animates its answers open with grid-template-rows, using buttons with aria-expanded and aria-controls. Closed answers are inert so they cannot be tabbed into while hidden.
document.querySelectorAll('#twfq4 > .group').forEach(function (g) {
var b = g.querySelector('button'), a = document.getElementById(b.getAttribute('aria-controls'));
function set(open) { b.setAttribute('aria-expanded', open); a.inert = !open; if (open) g.dataset.open = ''; else delete g.dataset.open; }
b.onclick = function () { set(b.getAttribute('aria-expanded') !== 'true'); };
set(false);
});
05. Tailwind Searchable FAQ
TailwindFAQSearch
A search box above the questions hides the ones that do not match as you type, and a status line says how many remain. Matching runs on both question and answer text.
View code
<div class="w-full max-w-sm">
<input id="twfq5i" type="search" aria-label="Search questions" placeholder="Search questions" class="w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm focus:border-indigo-600 focus:outline-none focus:ring-1 focus:ring-indigo-600">
<p id="twfq5s" role="status" class="mt-1 min-h-5 text-xs text-slate-600"></p>
<div id="twfq5" class="mt-1 grid gap-2">
<details class="rounded-xl bg-white p-3 ring-1 ring-slate-200"><summary class="cursor-pointer font-semibold text-slate-900">How do refunds work?</summary><p class="mt-1 text-sm text-slate-600">Refunds go back to the original card within 5 days.</p></details>
<details class="rounded-xl bg-white p-3 ring-1 ring-slate-200"><summary class="cursor-pointer font-semibold text-slate-900">Can I change my address?</summary><p class="mt-1 text-sm text-slate-600">Yes, until the order ships.</p></details>
<details class="rounded-xl bg-white p-3 ring-1 ring-slate-200"><summary class="cursor-pointer font-semibold text-slate-900">Do you offer gift wrap?</summary><p class="mt-1 text-sm text-slate-600">Yes, for $3 per order.</p></details>
</div>
</div>
var i = document.getElementById('twfq5i'), items = document.querySelectorAll('#twfq5 details');
i.oninput = function () { var q = i.value.trim().toLowerCase(), n = 0; items.forEach(function (d) { var on = d.textContent.toLowerCase().indexOf(q) > -1; d.hidden = !on; if (on) n++; }); document.getElementById('twfq5s').textContent = q ? (n ? n + ' of ' + items.length + ' questions match' : 'No questions match') : ''; };
06. Tailwind Numbered Dark FAQ
TailwindFAQDark
Numbered questions on a dark panel, where the open item gets a lighter background with open:bg-white/5. The numbers are decorative badges, hidden from screen readers so the question text reads cleanly.
View code
<div class="grid w-full max-w-sm gap-1 rounded-2xl bg-slate-900 p-2 ring-1 ring-white/10">
<details class="group rounded-xl p-3 open:bg-white/5" open><summary class="flex cursor-pointer list-none items-start gap-3 rounded text-sm font-semibold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-300 [&::-webkit-details-marker]:hidden"><span aria-hidden="true" class="rounded bg-sky-400/15 px-1.5 font-mono text-xs leading-5 text-sky-300">01</span>Is my data encrypted?</summary><p class="ml-10 mt-2 text-sm text-slate-300">Yes, in transit and at rest.</p></details>
<details class="group rounded-xl p-3 open:bg-white/5"><summary class="flex cursor-pointer list-none items-start gap-3 rounded text-sm font-semibold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-300 [&::-webkit-details-marker]:hidden"><span aria-hidden="true" class="rounded bg-sky-400/15 px-1.5 font-mono text-xs leading-5 text-sky-300">02</span>Can I export everything?</summary><p class="ml-10 mt-2 text-sm text-slate-300">Yes, as CSV or JSON at any time.</p></details>
<details class="group rounded-xl p-3 open:bg-white/5"><summary class="flex cursor-pointer list-none items-start gap-3 rounded text-sm font-semibold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-300 [&::-webkit-details-marker]:hidden"><span aria-hidden="true" class="rounded bg-sky-400/15 px-1.5 font-mono text-xs leading-5 text-sky-300">03</span>Who can see my projects?</summary><p class="ml-10 mt-2 text-sm text-slate-300">Only people you invite.</p></details>
</div>
About these Tailwind FAQ Accordions
details and summary first
Native details elements open and close with no JavaScript and are accessible by default; style the open state with group-open: and open:.
Remove the default marker
list-none and [&::-webkit-details-marker]:hidden remove the triangle so you can draw your own icon.
Exclusive accordions
Give every details element the same name attribute and the browser closes the others when one opens.
Animated height
Animate grid-template-rows from [0fr] to [1fr] with button toggles, and make closed answers inert.
Frequently asked questions
Should I add FAQ schema?
Add FAQPage structured data only if the page is genuinely a list of questions and answers.
Can details animate?
Not smoothly on its own yet; the animated demo uses buttons for that reason.