- Published on
6 Easy Ways To Make A A Collapsibles Accordion With Tailwind CSS Without Even Thinking About It
- What is Tailwind CSS?
- The description of a collapsible accordion UI component
- Why use Tailwind CSS to create a collapsible accordion UI component?
- The preview of a collapsible accordion UI component
- The source code of a collapsible accordion UI component
- How to create a collapsible accordion with Tailwind CSS?
- 1. Use the x-show directive
- 2. Use the x-data directive
- 3. Use the x-init directive
- 4. Use the x-for directive
- 5. Use the x-ref directive
- 6. Use the x-transition directive
- Conclusion
If you're a FrontEnd technology blogger, you must have heard of Tailwind CSS, a utility-first CSS framework that helps you build responsive and custom designs quickly. With Tailwind CSS, you can easily create a collapsible accordion UI component without even thinking about it. In this article, we will explore six easy ways to make a collapsible accordion with Tailwind CSS.
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that provides you with a set of pre-defined CSS classes that you can use to style your HTML elements. It allows you to build custom designs quickly by providing you with a comprehensive set of utility classes that you can use to style your elements.
The description of a collapsible accordion UI component
A collapsible accordion is a UI component that allows you to expand and collapse content sections. It is commonly used to display FAQs, product features, or any other content that needs to be organized in a compact way. When a user clicks on a section, it expands to reveal the content, and when they click again, it collapses.
Why use Tailwind CSS to create a collapsible accordion UI component?
Tailwind CSS makes it easy to create a collapsible accordion UI component because it provides you with a set of utility classes that you can use to style your HTML elements. You don't need to write any custom CSS code, which saves you time and effort. Additionally, Tailwind CSS is responsive by default, so your accordion will look great on any device.
The preview of a collapsible accordion UI component
To create a collapsible accordion UI component with Tailwind CSS, you can use a combination of HTML and CSS classes. The HTML structure consists of a container element that holds the accordion sections, and each section contains a header and a content element. You can use the following Tailwind CSS classes to style your accordion:
bg-gray-100
: sets the background color of the accordion container to gray.border
: adds a border to the accordion container.rounded-lg
: rounds the corners of the accordion container.shadow-md
: adds a shadow to the accordion container.cursor-pointer
: sets the cursor to a pointer when hovering over the accordion headers.transition-all
: adds a smooth transition effect when expanding and collapsing the accordion sections.transform
: rotates the arrow icon when expanding and collapsing the accordion sections.
Free download of the A collapsibles accordion's source code
The source code of a collapsible accordion UI component
To create a collapsible accordion UI component with Tailwind CSS, you can use the following HTML and CSS code:
<!-- This is an example component -->
<style>
.accordion {
width: 100%;
}
.panel {
display: none;
overflow: hidden;
}
</style>
<div class="mx-auto flex w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-md">
<div class="mx-auto my-2 bg-blue-200">
<h2 class="bg-dark-800 p-4 text-center font-black">Accordion</h2>
<button
class="border-light-blue-500 accordion rounded-sm border-4 border-solid bg-yellow-500 p-4 text-left font-black hover:bg-red-700 focus:bg-red-700"
>
Section 1
</button>
<div class="panel bg-blue-100 p-4">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<button
class="border-light-blue-500 accordion rounded-sm border-4 border-solid bg-yellow-500 p-4 text-left font-black hover:bg-red-700 focus:bg-red-700"
>
Section 2
</button>
<div class="panel bg-blue-100 p-4">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<button
class="border-light-blue-500 accordion rounded-sm border-4 border-solid bg-yellow-500 p-4 text-left font-black hover:bg-red-700 focus:bg-red-700"
>
Section 3
</button>
<div class="panel bg-blue-100 p-4">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
<script>
var accordElement = document.getElementsByClassName('accordion')
for (i = 0; i < accordElement.length; i++) {
accordElement[i].addEventListener('click', function () {
this.classList.toggle('active')
var panel = this.nextElementSibling
if (panel.style.display === 'block') {
panel.style.display = 'none'
} else {
panel.style.display = 'block'
}
})
}
</script>
How to create a collapsible accordion with Tailwind CSS?
Now that we've seen the preview and source code of a collapsible accordion UI component, let's explore six easy ways to create one with Tailwind CSS.
x-show
directive
1. Use the The x-show
directive is a built-in directive in Alpine.js, a lightweight JavaScript library that allows you to add interactivity to your HTML elements. You can use the x-show
directive to show or hide elements based on a condition. To create a collapsible accordion with the x-show
directive, you can use the following code:
<div class="bg-gray-100 border rounded-lg shadow-md">
<div class="p-4">
<div class="flex items-center justify-between cursor-pointer" x-on:click="open = !open">
<h2 class="text-lg font-medium">Accordion Header</h2>
<svg class="w-4 h-4 transform" :class="{'rotate-180': open}" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M6.293 7.293a1 1 0 011.414 0L10 9.586l2.293-2.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</div>
<div class="mt-2" x-show="open">
<p class="text-gray-700">Accordion Content</p>
</div>
</div>
</div>
In this code, we use the x-show
directive to show or hide the accordion content based on the open
variable. When the user clicks on the accordion header, we toggle the value of the open
variable to show or hide the content. We also use the transform
class to rotate the arrow icon when expanding and collapsing the accordion sections.
x-data
directive
2. Use the The x-data
directive is another built-in directive in Alpine.js that allows you to define data properties and methods for your HTML elements. You can use the x-data
directive to create a collapsible accordion with a data property that tracks the open/closed state of the accordion. To create a collapsible accordion with the x-data
directive, you can use the following code:
<div class="bg-gray-100 border rounded-lg shadow-md" x-data="{ open: false }">
<div class="p-4">
<div class="flex items-center justify-between cursor-pointer" x-on:click="open = !open">
<h2 class="text-lg font-medium">Accordion Header</h2>
<svg class="w-4 h-4 transform" :class="{'rotate-180': open}" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M6.293 7.293a1 1 0 011.414 0L10 9.586l2.293-2.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</div>
<div class="mt-2" x-show="open">
<p class="text-gray-700">Accordion Content</p>
</div>
</div>
</div>
In this code, we use the x-data
directive to define a data property called open
that tracks the open/closed state of the accordion. We use the x-on:click
directive to toggle the value of the open
property when the user clicks on the accordion header. We also use the :class
directive to add the rotate-180
class to the arrow icon when the accordion is open.
x-init
directive
3. Use the The x-init
directive is a built-in directive in Alpine.js that allows you to initialize data properties and methods when your HTML element is first loaded. You can use the x-init
directive to create a collapsible accordion with an initialized data property that tracks the open/closed state of the accordion. To create a collapsible accordion with the x-init
directive, you can use the following code:
<div class="bg-gray-100 border rounded-lg shadow-md" x-data="{ open: false }" x-init="open = true">
<div class="p-4">
<div class="flex items-center justify-between cursor-pointer" x-on:click="open = !open">
<h2 class="text-lg font-medium">Accordion Header</h2>
<svg class="w-4 h-4 transform" :class="{'rotate-180': open}" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M6.293 7.293a1 1 0 011.414 0L10 9.586l2.293-2.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</div>
<div class="mt-2" x-show="open">
<p class="text-gray-700">Accordion Content</p>
</div>
</div>
</div>
In this code, we use the x-init
directive to initialize the open
property to true
, which means that the accordion will be open by default. We use the x-on:click
directive to toggle the value of the open
property when the user clicks on the accordion header. We also use the :class
directive to add the rotate-180
class to the arrow icon when the accordion is open.
x-for
directive
4. Use the The x-for
directive is a built-in directive in Alpine.js that allows you to loop through an array and render HTML elements for each item in the array. You can use the x-for
directive to create a collapsible accordion with multiple sections. To create a collapsible accordion with the x-for
directive, you can use the following code:
<div class="bg-gray-100 border rounded-lg shadow-md" x-data="{ sections: [{ title: 'Section 1', content: 'Content 1' }, { title: 'Section 2', content: 'Content 2' }] }">
<template x-for="(section, index) in sections" :key="index">
<div class="p-4">
<div class="flex items-center justify-between cursor-pointer" x-on:click="section.open = !section.open">
<h2 class="text-lg font-medium" x-text="section.title"></h2>
<svg class="w-4 h-4 transform" :class="{'rotate-180': section.open}" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M6.293 7.293a1 1 0 011.414 0L10 9.586l2.293-2.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</div>
<div class="mt-2" x-show="section.open">
<p class="text-gray-700" x-text="section.content"></p>
</div>
</div>
</template>
</div>
In this code, we use the x-data
directive to define an array of sections, each containing a title and content property. We use the x-for
directive to loop through the sections array and render an accordion section for each item in the array. We use the x-on:click
directive to toggle the open
property of each section when the user clicks on the accordion header.
x-ref
directive
5. Use the The x-ref
directive is a built-in directive in Alpine.js that allows you to reference an HTML element in your JavaScript code. You can use the x-ref
directive to create a collapsible accordion with a reference to the accordion container, which allows you to manipulate the accordion from your JavaScript code. To create a collapsible accordion with the x-ref
directive, you can use the following code:
<div class="bg-gray-100 border rounded-lg shadow-md" x-data="{ open: false }" x-ref="accordion">
<div class="p-4">
<div class="flex items-center justify-between cursor-pointer" x-on:click="open = !open">
<h2 class="text-lg font-medium">Accordion Header</h2>
<svg class="w-4 h-4 transform" :class="{'rotate-180': open}" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M6.293 7.293a1 1 0 011.414 0L10 9.586l2.293-2.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</div>
<div class="mt-2" x-show="open">
<p class="text-gray-700">Accordion Content</p>
</div>
</div>
</div>
<script>
const accordion = document.querySelector('[x-ref="accordion"]');
// manipulate the accordion from your JavaScript code
</script>
In this code, we use the x-ref
directive to reference the accordion container element. We can then manipulate the accordion from our JavaScript code by using the accordion
variable.
x-transition
directive
6. Use the The x-transition
directive is a built-in directive in Alpine.js that allows you to add transition effects to your HTML elements. You can use the x-transition
directive to create a collapsible accordion with a smooth transition effect when expanding and collapsing the sections. To create a collapsible accordion with the x-transition
directive, you can use the following code:
<div class="bg-gray-100 border rounded-lg shadow-md" x-data="{ open: false }">
<div class="p-4">
<div class="flex items-center justify-between cursor-pointer" x-on:click="open = !open">
<h2 class="text-lg font-medium">Accordion Header</h2>
<svg class="w-4 h-4 transform" :class="{'rotate-180': open}" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M6.293 7.293a1 1 0 011.414 0L10 9.586l2.293-2.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</div>
<div class="mt-2" x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90">
<p class="text-gray-700">Accordion Content</p>
</div>
</div>
</div>
In this code, we use the x-transition
directive to add a smooth transition effect when expanding and collapsing the accordion sections. We use the x-transition:enter
and x-transition:leave
directives to define the enter and leave transitions, and we use the x-transition:enter-start
, x-transition:enter-end
, x-transition:leave-start
, and x-transition:leave-end
directives to define the start and end states of the transitions.
Conclusion
In this article, we explored six easy ways to make a collapsible accordion with Tailwind CSS. We saw how Tailwind CSS provides us with a set of utility classes that we can use to style our HTML elements, which makes it easy to create a custom design quickly. We also saw how we can use Alpine.js to add interactivity to our HTML elements and create a smooth transition effect when expanding and collapsing the accordion sections. With these techniques, you can create a professional-looking collapsible accordion UI component without even thinking about it.