CSS only Animated Accordion with Tailwind CSS

These days CSS has a lot of cool features and you can really do a lot without javascript!

I though we have all the parts for creating an animated accordion. So I’ve set off to do it, here’s the solution:

<details class="group peer">
  <summary class="flex cursor-pointer justify-between px-4 py-5">
    <h2 class="text-body-1">Title 1</h2>
    <svg
      class="inline-block h-6 w-6 transition-transform group-open:rotate-180"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="1.5"
    >
      <polyline points="6 9 12 15 18 9"></polyline>
    </svg>
  </summary>
</details>
<div
  id="sibling"
  class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 peer-open:grid-rows-[1fr]"
>
  <ul class="overflow-hidden">
    <li class="px-4 py-2">Item 1</li>
    <li class="px-4 py-2">Item 2</li>
  </ul>
</div>

TL; DR; Play around with the code here:

https://play.tailwindcss.com/uUGBz7pYh9

Here’s an explanation:

• <details> component is a nice way to have an accordion without any javascript, but it lacks a way to animate the content.
  • we use the group class so that we can animate the icon
  • we use the peer class so that we can animate the content
  • we can’t use the slot as it wont apply animations correctly
• Sibling <div id="sibling"> uses the grid-template-rows to animate the height from 0 to auto, this alone is a cool CSS trick.
  • the first child has to have the overflow-hidden class as otherwise the 0fr will show the content.
• There are a few lines of custom css to hide the native <details> arrow