How to create an accordion with Tailwind CSS and Alpinejs

An accordion, yeah that’s right.

What are accordions?

An accordion is a way to display a list of items that can be expanded and collapsed, it also saves space by not displaying all the items at once. It’s a great way to organize information and make it easier to read, especially for longer lists.

Use Cases:

• Product lists: For example, a product list can be displayed in an accordion to showcase different products.
• Service lists: A service list can be displayed in an accordion to showcase different services.
• FAQs: An accordion can be used to display frequently asked questions (FAQs).
• News: An accordion can be used to display news articles or blog posts.
• Documentation: An accordion can be used to display documentation or instructions.

Let’s build the structure

Understanding the code:

• x-data="{ openIndex: null }": This is the data that will be used to store the open index.
• @click="openIndex === 0 ? openIndex = null : openIndex = 0": This is the event listener that will update the open index when a button is clicked.
• x-show="openIndex === 0": This is the condition that will be checked when the open index is 0.
• :class="{ 'rotate-45': openIndex === 1 }": This is the class that will be applied to the SVG inside the button based on its open index.

Classes are removed for brevity, but I’ll keep those classes relevant to the tutorial.

<div x-data="{ openIndex: null }">
  <div class="border rounded-md overflow-hidden">
    <!-- Accordion Item 1 -->
    <div class="border-b">
      <button
        @click="openIndex === 0 ? openIndex = null : openIndex = 0"
        class="w-full flex justify-between items-center p-4 focus:outline-none text-neutral-500 focus:text-orange-500">
        <span>What time is it?</span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="w-6 h-6 transform transition-transform"
          :class="{ 'rotate-45': openIndex === 0 }">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M12 4.5v15m7.5-7.5h-15"
          ></path>
        </svg>
      </button>
      <div
        x-show="openIndex === 0"
        class="p-4 border-t text-sm bg-neutral-50 text-neutral-500">
        I don't know what time it is.
      </div>
    </div>

    <!-- Accordion Item 2 -->
    <div class="border-b">
      <button
        @click="openIndex === 1 ? openIndex = null : openIndex = 1"
        class="w-full flex justify-between items-center p-4 focus:outline-none text-neutral-500 focus:text-orange-500">
        <span>Why not?</span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="w-6 h-6 transform transition-transform"
          :class="{ 'rotate-45': openIndex === 1 }">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M12 4.5v15m7.5-7.5h-15"
          ></path>
        </svg>
      </button>
      <div
        x-show="openIndex === 1"
        class="p-4 text-neutral-500 bg-neutral-50 text-sm border-t">
        Because I have lost the notion of time.
      </div>
    </div>
  </div>
</div>

Conclusion

This is a simple accordion that can be used for many different types of content, such as products, services, FAQs, news, and documentation.

Hope you enjoyed this tutorial and have a great day!

/Michael Andreuzza