How to create a JavaScript-Free animated accordion FAQ section with only Tailwind CSS

Creating a JavaScript-Free Animated Accordion FAQ Section with Tailwind CSS

Today we are going to create a JavaScript-free animated accordion FAQ section using only Tailwind CSS. This is a great way to add interactivity to your website without using JavaScript.

Why a JavaScript-Free Accordion FAQ Section?

Using a JavaScript-free approach for your accordion FAQ section can be beneficial for several reasons:

Performance: Eliminates the need for JavaScript, which can reduce the complexity and increase page load speed.
Simplicity: By relying on CSS, the implementation is often simpler and easier to maintain.
Accessibility: Tailwind CSS in combination with CSS-only techniques can make your content more accessible to users who rely on assistive technologies.
Progressive Enhancement: This approach ensures that the basic functionality of your FAQ section remains functional even if JavaScript is disabled or fails to load.

Use Cases

A JavaScript-free accordion FAQ section is useful in various scenarios, such as:

Documentation: For user guides or FAQs where users need to access specific information without overwhelming them with a long page.
Support Pages: On customer support or help center pages to organize frequently asked questions in a user-friendly manner.
Blog Posts: To provide detailed answers to common questions within a blog post or article without cluttering the content.

Let’s create the accordion FAQ section

This is a simple HTML structure that consists of a hidden checkbox, a label for the checkbox, and a div that is hidden by default. We will use the peer and peer-checked:hidden classes to control the visibility of the div.

The hidden checkbox

The hidden checkbox is used to toggle the visibility of the div. Attributes:

type="checkbox": This is a HTML attribute that specifies the type of input element.
id="#_": This is an HTML attribute that specifies the unique identifier of the input element. We will use this id to target the checkbox and the div.

Classes:

hidden: This is a Tailwind CSS utility class that sets the element to be hidden.
peer: This is a Tailwind CSS utility class that sets the element to be positioned relative to its peer element.

<input type="checkbox" id="#_" class="hidden peer"/>

The trigger, which is the label for the checkbox

The trigger is the label for the checkbox, and when clicked, it will toggle the visibility of the div. This is where we will add the question and an animated SVG icon. This last one is optional.

Attributes:

for="#_": This is an HTML attribute that specifies the id of the checkbox that controls the visibility of the div.

<label for="#_">
  <h4>
    <!-- Question goes here -->
  </h4>
  <svg class="peer-checked:rotate-180 transition-transform duration-300">
    <!-- SVG path goes here -->
  </svg>
</label>

The icon

The icon is an animated SVG icon that rotates 180 degrees when the checkbox is checked.

peer-checked:rotate-180: This is a Tailwind CSS utility class that rotates the icon 180 degrees when the checkbox is checked.
transition-transform: This is a Tailwind CSS utility class that adds a transition effect to the icon’s transform property.
duration-300: This is a Tailwind CSS utility class that sets the duration of the transition effect to 300 milliseconds.

<svg class="peer-checked:rotate-180 transition-transform duration-300">
  <!-- SVG path goes here -->
</svg>

The answer

The answer is the div that is hidden by default, and we will be able to control its visibility by chekcing the checkbox.

max-h-0: This is a Tailwind CSS utility class that sets the element to be hidden by default.
peer-checked:max-h-screen: This is a Tailwind CSS utility class that sets the element to be hidden when the checkbox is checked.
transition-all: This is a Tailwind CSS utility class that adds a transition effect to all CSS properties.
duration-500: This is a Tailwind CSS utility class that sets the duration of the transition effect to 500 milliseconds.
overflow-hidden: This is a Tailwind CSS utility class that sets the element to hide its overflow.

<div
  class="overflow-hidden max-h-0 peer-checked:max-h-screen transition-all duration-500">
  <!-- Answer goes here -->
</div>

The full markup for the accordion FAQ section

The full markup for the accordion FAQ section is a simple HTML structure that consists of a hidden checkbox, a label for the checkbox, and a div that is hidden by default. Visual styling classes are omitted for brevity, just can add your own styles or grab the ones from the code file.

<div>
  <input
    type="checkbox"
    id="#_"
    class="peer hidden"
  />
  <label
    for="#_">
    <h4><!-- Question goes here --></h4>
    <svg
      class=" peer-checked:rotate-180 transition-transform duration-300">
     <!-- SVG path goes here -->
    </svg>
  </label>
  <div
    class="overflow-hidden max-h-0 peer-checked:max-h-screen transition-all duration-500">
    <!-- Answer goes here -->
  </div>
</div>

Conclusion

This is a how you can create a JavaScript-free animated accordion FAQ section using only Tailwind CSS, you can also do this with also CSS and call it a day, but if are using Tailwind CSS you can take advantage of the peer and peer-checked:hidden classes to control the visibility of the div without JavaScript.

Hope you enjoyed this tutorial and have a great day!

/Michael Andreuzza

Did you like this tutorial? Please share it with your friends!