Create an Accordion with Tailwind CSS and Alpine JS

Hi! In this blog we'll learn how we can create an accordion component using TailwindCSS and AlpineJS.

Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the modern web. Plop in a script tag and get going.

When you're using Alpine JS then we don't have to leave our index.html just like Tailwind CSS.

If you want to code with me check this video

First of all create index.html. For this tutorial we're using Tailwind Play CDN. Now we have to add the following script to use Alpine JS in our project

<script src="//unpkg.com/alpinejs" defer></script>

If you don't have basic understanding of Alpine JS then you can refer this video

HTML

The starting file of our project looks like this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Accordion Tutorial</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="//unpkg.com/alpinejs" defer></script>
</head>
<body>

</body>
</html>

Now create the basic structure of an accordion using Tailwind CSS

<div class="w-[60vw] mx-auto bg-red-50 mt-16">
        <div class="flex justify-between items-center bg-red-200">
            <p class="px-4">Accordion 1</p>
            <button class="px-2 text-black hover:text-gray-500 font-bold text-3xl"></button>
        </div>
        <div class="mx-4 py-4">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta repudiandae ut dolores totam nobis molestias!</div>
        <hr class="h-[0.1rem] bg-slate-500">
    </div>

If you noticed that there is no text used with button but we put that dynamically depending on the state of accordion. And the details of accordion are currently visible but don't worry we'll fix with AlpineJS

Add the x-data="open:false" Alpine property in the parent element. And add onclick event to button. So, on clicking the button we'll change the state of open. If open is true then we'll show the + sign and incase of false - sign as text in button tag.

<button @click="open=!open" x-html="open ? '-' :'+' " class="px-2 text-black hover:text-gray-500 font-bold text-3xl"></button>

Now to show or hide the details of accordion we add the x-show property of Alpine JS. So, when the value of open is 'true' then show the details otherwise hide the details. We also add x-transition property to add some transition effect.

Here is the complete code of this small tutorial

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Accordion Tutorial</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="//unpkg.com/alpinejs" defer></script>
    <style>
        [x-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <!-- <p class="text-5xl">Tailwind Accordion Tutorial</p> -->
    <div x-data="{open:false}" class="w-[60vw] mx-auto bg-red-50 mt-16">
        <div class="flex justify-between items-center bg-red-200">
            <p class="px-4">Accordion 1</p>
            <button @click="open=!open" x-html="open ? '-' :'+' " class="px-2 text-black hover:text-gray-500 font-bold text-3xl"></button>
        </div>
        <div x-show="open" x-cloak  class="mx-4 py-4" x-transition>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta repudiandae ut dolores totam nobis molestias!</div>
        <hr class="h-[0.1rem] bg-slate-500">
    </div>
    <div x-data="{open:false}" class="w-[60vw] mx-auto  bg-red-50">
        <div class="flex justify-between items-center bg-red-200">
            <p class="px-4">Accordion 2</p>
            <button @click="open=!open" x-html="open ? '-' :'+' " class="px-2 text-black hover:text-gray-500 font-bold text-3xl"></button>
        </div>
        <div x-show="open" x-cloak class="mx-4 py-4" x-transition>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta repudiandae ut dolores totam nobis molestias!</div>
        <hr class="h-[0.1rem] bg-slate-500">
    </div>
    <div x-data="{open:false}" class="w-[60vw] mx-auto  bg-red-50">
        <div class="flex justify-between items-center bg-red-200">
            <p class="px-4">Accordion 3</p>
            <button @click="open=!open" x-html="open ? '-' :'+' " class="px-2 text-black hover:text-gray-500 font-bold text-3xl"></button>
        </div>
        <div x-show="open" x-cloak class="mx-4 py-4" x-transition>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta repudiandae ut dolores totam nobis molestias!</div>
        <hr>
    </div>
</body>
</html>

I hope you loved this.

Blog

Create an Accordion with Tailwind CSS and Alpine JS

Rohit Sharma

Join Our Newsletter. No Spam, Only the good stuff.

Related