Do you want to add an interactive and visually appealing section to your website? A common user need is to display information concisely, and a great way to do this is with an accordion. This tutorial will guide you through creating a Tailwind Animated Accordion with Alpine JS. This combination allows for a lightweight, dynamic, and styled component. It helps you manage content effectively, making your web pages cleaner and more user-friendly.
How to Create a Tailwind Animated Accordion with Alpine JS
First, you need to set up your HTML document. This involves linking necessary external libraries.
Add Header Assets
You must link the Tailwind CSS framework. Place the following code inside the <head> tag of your HTML document.
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/tailwindcss@1.4.6/dist/tailwind.css'>
Create the HTML Structure
Next, define the visual layout of your accordion. This HTML code includes Alpine.js directives for dynamic behavior and Tailwind CSS classes for styling.
<div class="bg-gray-100 pt-10 px-3 pb-20">
<h1 class="text-gray-600 text-center">
<div class="font-bold">
Smooth Accordion
</div>
using Alpine.js (w/ x-for) + Tailwind CSS
</h1>
<div class="my-10 max-w-2xl mx-auto space-y-4 lg:space-y-6" x-data="{ faq, faq_selected: null }">
<template x-for="(item, index) in faq" :key="`item-{$index}`">
<div class="item bg-white shadow-md rounded-md p-3">
<div class="flex items-center cursor-pointer" @click="faq_selected !== index ? faq_selected = index : faq_selected = null">
<div class="bg-indigo-100 text-indigo-400 w-8 h-8 md:w-10 md:h-10 rounded-md flex items-center justify-center font-bold text-lg font-display">
<span x-text="index + 1"></span>
</div>
<div class="ml-3 md:ml-4 lg:ml-6 md:text-lg text-indigo-600">
<span x-text="item.question"></span>
</div>
</div>
<div class="relative overflow-hidden transition-all max-h-0 duration-700" x-bind:style="faq_selected === index ? `max-height: ${ $el.scrollHeight }px` : ``">
<div class="text-gray-700 ml-8 md:ml-10 pl-3 md:pl-4 lg:pl-6 py-2 space-y-3">
<template x-for="(ans, index) in item.answer" :key="`item-ans-{$index}`">
<p x-text="ans"></p>
</template>
</div>
</div>
</div>
</template>
</div>
</div>
<script src='https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js'></script><script src="./script.js"></script>
Apply CSS Styling
After that, add a small piece of custom CSS. This style ensures the smooth transition of the accordion content.
.max-h-0 {
max-height: 0
}
/*
Inspired by
*/
Add JavaScript Functionality
Then, provide the data and logic for your accordion. This JavaScript code will power the interactive elements using Alpine.js.
const faq = [
{
question: "What is Alpine.js?",
answer: [
"Bacon ipsum dolor amet boudin hamburger jerky spare ribs, bacon leberkas beef ribs sausage turkey pancetta tenderloin chicken.",
"Meatball landjaeger turducken. Bacon bresaola tenderloin cow rump pork chop."
]
},
{
question: "Is it difficult to learn?",
answer: [
"Boudin sausage hamburger tenderloin beef chislic prosciutto pancetta. Beef tongue pork meatloaf.",
"Chicken pork chop turducken ground round. Shank bresaola burgdoggen short loin ham hock ham. Boudin tri-tip swine drumstick strip steak tail."
]
},
{
question: "How can I use this code?",
answer: [
"Salami filet mignon strip steak venison rump chicken bresaola. Shank flank tongue ribeye. Beef pork chop sirloin venison chicken jowl.",
"Doner corned beef kielbasa beef ribs ground round cow salami swine."
]
}
];
Include Footer Assets
Finally, link the Alpine.js library and your custom JavaScript file. Place this code just before the closing </body> tag.
That’s all! You have successfully created a Tailwind Animated Accordion. This solution is both efficient and visually appealing.
