Samenflug UI Library v0.3
Home Astro UI Components

Animated CSS Accordion

An animated accordion without JavaScript, using Tailwind CSS. The component gracefully handles variable content heights using CSS grid.

Each panel has its own transition duration, which can be adjusted depending on the amount of content, ensuring a smooth and visually appealing user experience.

Component in Action

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, amet!

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, amet!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, quis dolores! Accusantium fugiat fugit iure commodi dignissimos perferendis cum voluptatibus, natus soluta molestiae magnam debitis maiores et vel doloribus quibusdam?

Component Code

#tailwind

---
// Accordion #01 v0.9
const { ...attr } = Astro.props
---


<div {...attr}>
  <div class="space-y-3 text-black">
    <div>
      <label
        for="accordion-panel-1"
        class="cursor-pointer">
        <h4
          id="panel-1-title"
          class="w-full bg-lime-400 p-2">
          Accordion Panel 1
        </h4>
      </label>
      <input
        type="checkbox"
        id="accordion-panel-1"
        class="peer"
        hidden
      />
      <div
        class="grid [grid-template-rows:0fr] [transition:grid-template-rows_300ms] peer-checked:[grid-template-rows:1fr]"
        role="region"
        aria-labelledby="panel-1-title"
        aria-hidden="false"
        id="panel1-content">
        <div class="overflow-hidden">
          <div class="bg-slate-100 p-2">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, amet!</p>
          </div>
        </div>
      </div>
    </div>
    <div>
      <label
        for="accordion-panel-2"
        class="cursor-pointer">
        <h4
          id="panel-2-title"
          class="w-full bg-lime-400 p-2">
          Accordion Panel 2
        </h4>
      </label>
      <input
        type="checkbox"
        id="accordion-panel-2"
        class="peer"
        hidden
      />
      <div
        class="grid [grid-template-rows:0fr] [transition:grid-template-rows_400ms] peer-checked:[grid-template-rows:1fr]"
        role="region"
        aria-labelledby="panel-2-title"
        aria-hidden="false"
        id="panel-2-content">
        <div class="overflow-hidden border border-t-0 border-gray-400">
          <div class="bg-slate-100 p-2">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, amet!</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, quis dolores! Accusantium fugiat fugit iure commodi dignissimos perferendis cum voluptatibus, natus soluta molestiae magnam debitis maiores et vel doloribus quibusdam?</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

References