Create an Accordion with Tailwind CSS and Alpine JS
Tags: webdev, tailwindcss, javascript, tutorial
Published: 2022-09-19 14:29:31

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

{% codepen https://codepen.io/godzillaa/pen/KKoMxgK %}

**What is [Alpine JS](https://alpinejs.dev/)**

> 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](https://www.youtube.com/watch?v=KlFza4rBKeE)

First of all create `index.html`. For this tutorial we're using [Tailwind Play CDN](https://tailwindcss.com/docs/installation/play-cdn). Now we have to add the following script to use Alpine JS in our project

```html
<script src="//unpkg.com/alpinejs" defer></script>
```
If you don't have basic understanding of Alpine JS then you can refer this [video](https://youtu.be/r5iWCtfltso)

**HTML**

The starting file of our project looks like this

```html
<!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

```html
<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.

```html
<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

```html
<!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.