~/css/tailwind-accordions

6 Tailwind Accordions

5 Tailwind1 with JSPublished 2026-10-04Free · no sign-up

Six accordions in Tailwind: a details-based FAQ, an exclusive group that keeps one item open, numbered FAQ cards, the ARIA button pattern, a minimal product-details accordion and collapsible sidebar sections.

Filter demos

01. Tailwind Details Accordion

TailwindNative

An FAQ accordion using details and summary, styled with Tailwind's group-open: variant to rotate the plus sign into a cross. The browser handles opening, closing and keyboard support, so no JavaScript is needed.

View code

<div class="w-full max-w-md divide-y divide-slate-100 rounded-2xl bg-white shadow-lg shadow-slate-900/5">
  <details class="group" open><summary class="flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-4 font-semibold text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 [&::-webkit-details-marker]:hidden">How fast is delivery?<span class="text-xl text-blue-600 transition-transform group-open:rotate-45">+</span></summary><p class="px-5 pb-4 text-[15px] leading-relaxed text-slate-600">Most orders arrive in 2 to 4 working days.</p></details>
  <details class="group"><summary class="flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-4 font-semibold text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 [&::-webkit-details-marker]:hidden">Can I change my order?<span class="text-xl text-blue-600 transition-transform group-open:rotate-45">+</span></summary><p class="px-5 pb-4 text-[15px] leading-relaxed text-slate-600">Yes, until it is packed. Reply to your confirmation email.</p></details>
  <details class="group"><summary class="flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-4 font-semibold text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 [&::-webkit-details-marker]:hidden">Is packaging recyclable?<span class="text-xl text-blue-600 transition-transform group-open:rotate-45">+</span></summary><p class="px-5 pb-4 text-[15px] leading-relaxed text-slate-600">All boxes and fillers are paper based and recyclable.</p></details>
</div>

02. Tailwind One-at-a-Time Accordion

TailwindModern

Details elements that share a name attribute so only one panel stays open, with no script. Tailwind's open: variant highlights the open item's border, and group-open: rotates its chevron.

View code

<div class="grid w-full max-w-md gap-2">
  <details name="tw-faq" open class="group rounded-xl border border-slate-800 bg-slate-900 open:border-sky-400"><summary class="flex cursor-pointer list-none items-center gap-3 px-4 py-3.5 font-semibold text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400 rounded-xl [&::-webkit-details-marker]:hidden"><span class="h-2 w-2 -rotate-45 border-b-2 border-r-2 border-sky-400 transition-transform group-open:rotate-45"></span>Do you offer refunds?</summary><p class="px-4 pb-4 pl-9 text-[15px] leading-relaxed text-slate-400">Yes, within 30 days of delivery.</p></details>
  <details name="tw-faq" class="group rounded-xl border border-slate-800 bg-slate-900 open:border-sky-400"><summary class="flex cursor-pointer list-none items-center gap-3 px-4 py-3.5 font-semibold text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400 rounded-xl [&::-webkit-details-marker]:hidden"><span class="h-2 w-2 -rotate-45 border-b-2 border-r-2 border-sky-400 transition-transform group-open:rotate-45"></span>Can I pause my plan?</summary><p class="px-4 pb-4 pl-9 text-[15px] leading-relaxed text-slate-400">Pause for up to three months from settings.</p></details>
  <details name="tw-faq" class="group rounded-xl border border-slate-800 bg-slate-900 open:border-sky-400"><summary class="flex cursor-pointer list-none items-center gap-3 px-4 py-3.5 font-semibold text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400 rounded-xl [&::-webkit-details-marker]:hidden"><span class="h-2 w-2 -rotate-45 border-b-2 border-r-2 border-sky-400 transition-transform group-open:rotate-45"></span>Do you have a student discount?</summary><p class="px-4 pb-4 pl-9 text-[15px] leading-relaxed text-slate-400">Yes, 40% off with a valid student email.</p></details>
</div>

03. Tailwind FAQ Cards

TailwindFAQ

FAQ items as separate cards with numbered badges; the open card gets a tinted background, border and shadow from open: utilities. Numbers are decorative and the question text alone forms each summary's accessible name.

View code

<div class="grid w-full max-w-md gap-2.5">
  <details open class="rounded-2xl border border-slate-200 bg-white open:border-violet-200 open:bg-violet-50 open:shadow-md"><summary class="flex cursor-pointer list-none items-center gap-3 px-4 py-4 font-bold text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-600 rounded-2xl [&::-webkit-details-marker]:hidden"><span aria-hidden="true" class="grid h-8 w-8 place-items-center rounded-lg bg-violet-100 font-mono text-xs text-violet-800">01</span>Is there a setup fee?</summary><p class="px-4 pb-4 pl-[60px] text-[15px] leading-relaxed text-slate-600">No. You only pay the monthly plan.</p></details>
  <details class="rounded-2xl border border-slate-200 bg-white open:border-violet-200 open:bg-violet-50 open:shadow-md"><summary class="flex cursor-pointer list-none items-center gap-3 px-4 py-4 font-bold text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-600 rounded-2xl [&::-webkit-details-marker]:hidden"><span aria-hidden="true" class="grid h-8 w-8 place-items-center rounded-lg bg-violet-100 font-mono text-xs text-violet-800">02</span>Can I export my data?</summary><p class="px-4 pb-4 pl-[60px] text-[15px] leading-relaxed text-slate-600">Yes, as CSV at any time.</p></details>
  <details class="rounded-2xl border border-slate-200 bg-white open:border-violet-200 open:bg-violet-50 open:shadow-md"><summary class="flex cursor-pointer list-none items-center gap-3 px-4 py-4 font-bold text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-600 rounded-2xl [&::-webkit-details-marker]:hidden"><span aria-hidden="true" class="grid h-8 w-8 place-items-center rounded-lg bg-violet-100 font-mono text-xs text-violet-800">03</span>Do you support teams?</summary><p class="px-4 pb-4 pl-[60px] text-[15px] leading-relaxed text-slate-600">Every plan includes unlimited team members.</p></details>
</div>

04. Tailwind ARIA Accordion

TailwindARIA

The button-and-region accordion pattern styled with Tailwind's aria-expanded: variant, so the chevron rotation is driven by the same attribute screen readers announce. A short script toggles aria-expanded and the hidden attribute.

View code

<div class="w-full max-w-md divide-y divide-slate-800 rounded-2xl border border-slate-800 bg-slate-950">
  <h3><button aria-expanded="true" aria-controls="twa1" id="twb1" class="twab flex w-full items-center justify-between px-4 py-4 text-left font-semibold text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-400 after:text-emerald-400 after:transition-transform after:content-['\25BE'] aria-expanded:after:rotate-180">Profile</button></h3>
  <div id="twa1" role="region" aria-labelledby="twb1" class="px-4 pb-4 text-[15px] text-slate-400">Name, photo and shop bio.</div>
  <h3><button aria-expanded="false" aria-controls="twa2" id="twb2" class="twab flex w-full items-center justify-between px-4 py-4 text-left font-semibold text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-400 after:text-emerald-400 after:transition-transform after:content-['\25BE'] aria-expanded:after:rotate-180">Payouts</button></h3>
  <div id="twa2" role="region" aria-labelledby="twb2" hidden class="px-4 pb-4 text-[15px] text-slate-400">Bank account and payout schedule.</div>
  <h3><button aria-expanded="false" aria-controls="twa3" id="twb3" class="twab flex w-full items-center justify-between px-4 py-4 text-left font-semibold text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-400 after:text-emerald-400 after:transition-transform after:content-['\25BE'] aria-expanded:after:rotate-180">Security</button></h3>
  <div id="twa3" role="region" aria-labelledby="twb3" hidden class="px-4 pb-4 text-[15px] text-slate-400">Password and two-step sign-in.</div>
</div>

document.querySelectorAll('.twab').forEach(b => b.addEventListener('click', () => {
  const o = b.getAttribute('aria-expanded') !== 'true';
  b.setAttribute('aria-expanded', String(o));
  document.getElementById(b.getAttribute('aria-controls')).hidden = !o;
}));

05. Tailwind Minimal Line Accordion

TailwindMinimal

A pared-back accordion with only top and bottom borders and a thin chevron, suited to product pages for details like materials and care. group-open: rotates the chevron, and the summary keeps a visible focus ring.

View code

<div class="w-full max-w-md border-y border-slate-300">
  <details class="group border-b border-slate-300 last:border-b-0"><summary class="flex cursor-pointer list-none items-center justify-between py-4 font-bold text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-900 [&::-webkit-details-marker]:hidden">Materials<span class="h-2 w-2 rotate-45 border-b-2 border-r-2 border-slate-900 transition-transform group-open:-rotate-[135deg]"></span></summary><p class="pb-4 leading-relaxed text-slate-600">Organic cotton canvas, vegetable-tanned leather handles.</p></details>
  <details class="group"><summary class="flex cursor-pointer list-none items-center justify-between py-4 font-bold text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-900 [&::-webkit-details-marker]:hidden">Care<span class="h-2 w-2 rotate-45 border-b-2 border-r-2 border-slate-900 transition-transform group-open:-rotate-[135deg]"></span></summary><p class="pb-4 leading-relaxed text-slate-600">Spot clean with a damp cloth. Do not machine wash.</p></details>
</div>

06. Tailwind Sidebar Section Accordion

TailwindNavigation

A collapsible app sidebar where each section is a details element listing its pages. The active page is marked with aria-current and styled with the aria-[current=page]: variant, so the style follows the accessible state.

View code

<nav aria-label="App" class="w-60 rounded-2xl bg-slate-900 p-2 text-sm">
  <details open class="group"><summary class="flex cursor-pointer list-none items-center justify-between rounded-lg px-3 py-2 font-semibold text-slate-200 hover:bg-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 [&::-webkit-details-marker]:hidden">Store<span class="text-slate-500 transition-transform group-open:rotate-90">&#8250;</span></summary>
    <ul class="mb-1 ml-3 border-l border-slate-700 pl-2"><li><a href="#" class="block rounded-md px-3 py-1.5 text-slate-400 hover:text-white">Products</a></li><li><a href="#" aria-current="page" class="block rounded-md px-3 py-1.5 text-slate-400 hover:text-white aria-[current=page]:bg-indigo-500/20 aria-[current=page]:text-white">Orders</a></li><li><a href="#" class="block rounded-md px-3 py-1.5 text-slate-400 hover:text-white">Customers</a></li></ul>
  </details>
  <details class="group"><summary class="flex cursor-pointer list-none items-center justify-between rounded-lg px-3 py-2 font-semibold text-slate-200 hover:bg-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 [&::-webkit-details-marker]:hidden">Marketing<span class="text-slate-500 transition-transform group-open:rotate-90">&#8250;</span></summary>
    <ul class="mb-1 ml-3 border-l border-slate-700 pl-2"><li><a href="#" class="block rounded-md px-3 py-1.5 text-slate-400 hover:text-white">Campaigns</a></li><li><a href="#" class="block rounded-md px-3 py-1.5 text-slate-400 hover:text-white">Discounts</a></li></ul>
  </details>
</nav>

About these Tailwind Accordions

group-open and open:

Put group on a details element and use group-open: on its icon to rotate it when the panel opens, and open: on the details itself to change its border or background.

Hide the default marker

list-none and the arbitrary variant [&::-webkit-details-marker]:hidden remove the browser's triangle in every engine so your own icon is the only one.

Styling from ARIA

In the ARIA accordion, aria-expanded:after:rotate-180 rotates the chevron based on the same attribute screen readers announce, so the two never disagree.

Exclusive groups

The name attribute on details elements makes them close each other with no script; older browsers just allow several open.

Frequently asked questions

Do these need JavaScript?

Only the ARIA accordion. The others use details and summary.

Can I animate the height?

Yes, in supporting browsers, with interpolate-size and ::details-content in your CSS, as in the CSS accordions collection.

Is there a CSS version?

Yes, see the CSS accordions collection.