DEV Community 👩‍💻👨‍💻

Rohit Sharma
Rohit Sharma

Posted on

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.

What is Alpine JS

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

I hope you loved this.

Top comments (1)

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!