Tailwind CSS cookbook · Beginner
Build an FAQ accordion
Show questions that expand to reveal answers, accessible to keyboard and screen-reader users, with a rotating arrow.
Approach
Native <details>/<summary> gives keyboard support and semantics for free. Use group on the details element
and group-open: to rotate the arrow; divide-y separates items.
Solution
<div class="m-6 max-w-lg divide-y divide-slate-200 rounded-xl border border-slate-200 bg-white">
<details class="group p-4" open>
<summary class="flex cursor-pointer list-none items-center justify-between font-medium">
What is Tailwind CSS?
<span class="transition group-open:rotate-180">▾</span>
</summary>
<p class="mt-2 text-sm text-slate-600">A utility-first CSS framework for building custom designs in your markup.</p>
</details>
<details class="group p-4">
<summary class="flex cursor-pointer list-none items-center justify-between font-medium">
Is it free?
<span class="transition group-open:rotate-180">▾</span>
</summary>
<p class="mt-2 text-sm text-slate-600">Yes, it's open source under the MIT licence.</p>
</details>
<details class="group p-4">
<summary class="flex cursor-pointer list-none items-center justify-between font-medium">
Does it work with React?
<span class="transition group-open:rotate-180">▾</span>
</summary>
<p class="mt-2 text-sm text-slate-600">Yes, and with Vue, Svelte, Laravel and plain HTML.</p>
</details>
</div>
Pitfalls
- Using
divs with click handlers: no keyboard support or state announcements. - Hiding answers with
hiddenand no ARIA;<details>handles this for you.
Variations
- Give several
<details>the samenameattribute so only one can be open at a time (exclusive accordion). - Animate height with
transition-allanddetails-content:(4.1+) in supporting browsers.
Further reading: Tailwind CSS docs
Reference: https://tailwindcss.com/docs/hover-focus-and-other-states#open-closed-state