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>
      class="inline-block h-6 w-6 transition-transform group-open:rotate-180"
      viewBox="0 0 24 24"
      <polyline points="6 9 12 15 18 9"></polyline>
  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>

TL; DR; Play around with the code here:


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