Tailwind accordion

Responsive accordion built with Tailwind. Accordion is a vertically collapsing element to show and hide content via class changes.

Basic (not clickable)

Closed

Click me to open!

Opened

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis ipsam ipsa veniam, ratione incidunt dolores maiores nobis reprehenderit voluptas, quaerat delectus reiciendis corporis dolorum vero itaque unde ut corrupti tenetur?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


<p class="my-5 text-left">Closed</p>
<div
  class="text-xl font-medium text-left bg-white hover:bg-gray-100 hover:bg-opacity-50 duration-300 p-3 rounded-lg"
  role="alert"
>
  Click me to open!
</div>

<p class="my-5 text-left">Opened</p>

<div
  class="text-xl font-medium text-left bg-white bg-gray-100 bg-opacity-50 duration-300 p-3 rounded-lg rounded-b-none"
  role="alert"
>
  Opened
</div>
<div class="bg-gray-100 bg-opacity-50 p-3 pt-1 rounded-b-lg">
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis
  ipsam ipsa veniam, ratione incidunt dolores maiores nobis reprehenderit
  voluptas, quaerat delectus reiciendis corporis dolorum vero itaque unde
  ut corrupti tenetur?
</div>

With arrow (not clickable)

Closed

Click me to open!

Opened

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


<p class="my-5 text-left">Closed </p>
<div
  class="text-xl font-medium bg-white hover:bg-gray-100 hover:bg-opacity-50 duration-300 p-3 rounded-lg flex justify-between"
  role="alert"
>
  Click me to open!
  <i class="fas fa-chevron-down mt-1"></i>
</div>

<p class="my-5 text-left">Opened</p>

<div
  class="text-xl font-medium bg-white bg-gray-100 bg-opacity-50 duration-300 p-3 rounded-lg rounded-b-none flex justify-between"
  role="alert"
>
  Opened
  <i class="fas fa-chevron-up"></i>
</div>
<div class="bg-gray-100 bg-opacity-50 p-3 pt-1 rounded-b-lg">
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis
  ipsam ipsa veniam, ratione incidunt dolores maiores nobis reprehenderit
  voluptas, quaerat delectus reiciendis corporis dolorum vero itaque unde
  ut corrupti tenetur?
</div>

With + (not clickable)

Closed

Click me to open!

Opened

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


<p class="my-5 text-left">Closed </p>
<div
  class="text-xl font-medium bg-white hover:bg-gray-100 hover:bg-opacity-50 duration-300 p-3 rounded-lg flex justify-between"
  role="alert"
>
  Click me to open!
  <i class="fas fa-plus mt-1"></i>
</div>
<p class="my-5 text-left">Opened</p>
<div
  class="text-xl font-medium bg-white bg-gray-100 bg-opacity-50 duration-300 p-3 rounded-lg rounded-b-none flex justify-between"
  role="alert"
>
  Opened
  <i class="fas fa-minus mt-1"></i>
</div>
<div class="bg-gray-100 bg-opacity-50 p-3 pt-1 rounded-b-lg">
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis
  ipsam ipsa veniam, ratione incidunt dolores maiores nobis reprehenderit
  voluptas, quaerat delectus reiciendis corporis dolorum vero itaque unde
  ut corrupti tenetur?
</div>