Use our Tailwind CSS accordion component to allow the user to show and hide sections of related content on a page. There are many ways to use this component, like displaying a list of FAQs, showing various menus and submenus, displaying the locations of a particular company, and so on.
See below our simple and versatile accordion example that you can use in your Tailwind CSS projects. We also included some accordion props that are available.
To use an accordion example that has items expanded, add the .open class on the .collapse <div>.
<div class="relative mb-3">
<h6 class="mb-0">
<button
class="relative flex items-center w-full p-4 font-semibold text-left transition-all ease-in border-b border-solid cursor-pointer border-slate-100 text-slate-700 rounded-t-1 group text-dark-500"
data-collapse-target="collapse-1"
>
<span>What is Material Tailwind?</span>
<i class="absolute right-0 pt-1 text-xs fa fa-plus group-open:opacity-0"></i>
<i class="absolute right-0 pt-1 text-xs opacity-0 fa fa-minus group-open:opacity-100"></i>
</button>
</h6>
<div
data-collapse="collapse-1"
class="h-0 overflow-hidden transition-all duration-300 ease-in-out"
>
<div class="p-4 text-sm leading-normal text-blue-gray-500/80">
We're not always in the position that we want to be at. We're constantly
growing. We're constantly making mistakes. We're constantly trying to
express ourselves and actualize our dreams.
</div>
</div>
</div>
<div class="relative mb-3">
<h6 class="mb-0">
<button
class="relative flex items-center w-full p-4 font-semibold text-left transition-all ease-in border-b border-solid cursor-pointer border-slate-100 text-slate-700 rounded-t-1 group text-dark-500"
data-collapse-target="collapse-2"
>
<span>How to use Material Tailwind?</span>
<i class="absolute right-0 pt-1 text-xs fa fa-plus group-open:opacity-0"></i>
<i class="absolute right-0 pt-1 text-xs opacity-0 fa fa-minus group-open:opacity-100"></i>
</button>
</h6>
<div
data-collapse="collapse-2"
class="h-0 overflow-hidden transition-all duration-300 ease-in-out"
>
<div class="p-4 text-sm leading-normal text-blue-gray-500/80">
We're not always in the position that we want to be at. We're constantly
growing. We're constantly making mistakes. We're constantly trying to
express ourselves and actualize our dreams.
</div>
</div>
</div>
<div class="relative mb-3">
<h6 class="mb-0">
<button
class="relative flex items-center w-full p-4 font-semibold text-left transition-all ease-in border-b border-solid cursor-pointer border-slate-100 text-slate-700 rounded-t-1 group text-dark-500"
data-collapse-target="collapse-3"
>
<span>What can I do with Material Tailwind?</span>
<i class="absolute right-0 pt-1 text-xs fa fa-plus group-open:opacity-0"></i>
<i class="absolute right-0 pt-1 text-xs opacity-0 fa fa-minus group-open:opacity-100"></i>
</button>
</h6>
<div
data-collapse="collapse-3"
class="h-0 overflow-hidden transition-all duration-300 ease-in-out"
>
<div class="p-4 text-sm leading-normal text-blue-gray-500/80">
We're not always in the position that we want to be at. We're constantly
growing. We're constantly making mistakes. We're constantly trying to
express ourselves and actualize our dreams.
</div>
</div>
</div>You can use custom icons for the accordion trigger element and using the group-open attribute selector in tailwind css you can control the icon for open and close states of accordion.
<div class="relative mb-3">
<h6 class="mb-0">
<button
class="relative flex items-center w-full p-4 font-semibold text-left transition-all ease-in border-b border-solid cursor-pointer border-slate-100 text-slate-700 rounded-t-1 group text-dark-500"
data-collapse-target="animated-collapse-1"
>
<span>What is Material Tailwind?</span>
<i class="absolute right-0 pt-1 text-base transition-transform fa fa-chevron-down group-open:rotate-180"></i>
</button>
</h6>
<div
data-collapse="animated-collapse-1"
class="h-0 overflow-hidden transition-all duration-300 ease-in-out"
>
<div class="p-4 text-sm leading-normal text-blue-gray-500/80">
We're not always in the position that we want to be at. We're constantly
growing. We're constantly making mistakes. We're constantly trying to
express ourselves and actualize our dreams.
</div>
</div>
</div>
<div class="relative mb-3">
<h6 class="mb-0">
<button
class="relative flex items-center w-full p-4 font-semibold text-left transition-all ease-in border-b border-solid cursor-pointer border-slate-100 text-slate-700 rounded-t-1 group text-dark-500"
data-collapse-target="animated-collapse-2"
>
<span>How to use Material Tailwind?</span>
<i class="absolute right-0 pt-1 text-base transition-transform fa fa-chevron-down group-open:rotate-180"></i>
</button>
</h6>
<div
data-collapse="animated-collapse-2"
class="h-0 overflow-hidden transition-all duration-300 ease-in-out"
>
<div class="p-4 text-sm leading-normal text-blue-gray-500/80">
We're not always in the position that we want to be at. We're constantly
growing. We're constantly making mistakes. We're constantly trying to
express ourselves and actualize our dreams.
</div>
</div>
</div>
<div class="relative mb-3">
<h6 class="mb-0">
<button
class="relative flex items-center w-full p-4 font-semibold text-left transition-all ease-in border-b border-solid cursor-pointer border-slate-100 text-slate-700 rounded-t-1 group text-dark-500"
data-collapse-target="animated-collapse-3"
>
<span>What can I do with Material Tailwind?</span>
<i class="absolute right-0 pt-1 text-base transition-transform fa fa-chevron-down group-open:rotate-180"></i>
</button>
</h6>
<div
data-collapse="animated-collapse-3"
class="h-0 overflow-hidden transition-all duration-300 ease-in-out"
>
<div class="p-4 text-sm leading-normal text-blue-gray-500/80">
We're not always in the position that we want to be at. We're constantly
growing. We're constantly making mistakes. We're constantly trying to
express ourselves and actualize our dreams.
</div>
</div>
</div> <div class="relative mb-3">
<h6 class="relative block w-full opacity-50 pointer-events-none">
<button
class="flex items-center justify-between w-full py-4 font-sans text-xl antialiased font-semibold leading-snug transition-colors border-b select-none border-b-blue-gray-100 text-blue-gray-700 hover:text-blue-gray-900"
data-collapse-target="disabled-collapse-1"
>
<span>What is Material Tailwind?</span>
<i class="absolute right-0 pt-1 text-xs fa fa-plus group-open:opacity-0"></i>
<i class="absolute right-0 pt-1 text-xs opacity-0 fa fa-minus group-open:opacity-100"></i>
</button>
</h6>
<div
data-collapse="disabled-collapse-1"
class="h-0 overflow-hidden transition-all duration-300 ease-in-out"
>
<div class="p-4 text-sm leading-normal text-blue-gray-500/80">
We're not always in the position that we want to be at. We're constantly
growing. We're constantly making mistakes. We're constantly trying to
express ourselves and actualize our dreams.
</div>
</div>
</div>
<div class="relative mb-3">
<h6 class="mb-0">
<button
class="relative flex items-center w-full p-4 font-semibold text-left transition-all ease-in border-b border-solid cursor-pointer border-slate-100 text-slate-700 rounded-t-1 group text-dark-500"
data-collapse-target="disabled-collapse-2"
>
<span>How to use Material Tailwind?</span>
<i class="absolute right-0 pt-1 text-xs fa fa-plus group-open:opacity-0"></i>
<i class="absolute right-0 pt-1 text-xs opacity-0 fa fa-minus group-open:opacity-100"></i>
</button>
</h6>
<div
data-collapse="disabled-collapse-2"
class="h-0 overflow-hidden transition-all duration-300 ease-in-out"
>
<div class="p-4 text-sm leading-normal text-blue-gray-500/80">
We're not always in the position that we want to be at. We're constantly
growing. We're constantly making mistakes. We're constantly trying to
express ourselves and actualize our dreams.
</div>
</div>
</div>
<div class="relative mb-3">
<h6 class="mb-0">
<button
class="relative flex items-center w-full p-4 font-semibold text-left transition-all ease-in border-b border-solid cursor-pointer border-slate-100 text-slate-700 rounded-t-1 group text-dark-500"
data-collapse-target="disabled-collapse-3"
>
<span>What can I do with Material Tailwind?</span>
<i class="absolute right-0 pt-1 text-xs fa fa-plus group-open:opacity-0"></i>
<i class="absolute right-0 pt-1 text-xs opacity-0 fa fa-minus group-open:opacity-100"></i>
</button>
</h6>
<div
data-collapse="disabled-collapse-3"
class="h-0 overflow-hidden transition-all duration-300 ease-in-out"
>
<div class="p-4 text-sm leading-normal text-blue-gray-500/80">
We're not always in the position that we want to be at. We're constantly
growing. We're constantly making mistakes. We're constantly trying to
express ourselves and actualize our dreams.
</div>
</div>
</div>The following data attributes are available for accordion trigger element.
| Attribute | Description |
|---|---|
data-collapse-target | Set the accordion target element, it should be the same as the data-collapse data attribute. |
The following data attributes are available for accordion element.
| Attribute | Description |
|---|---|
data-collapse | Set the accordion element, it should be the same as the data-collapse-target data attribute. |
The accordion component needs a required script file to work, you just need to add the below script file to the bottom of your html file.
<!-- from node_modules -->
<script src="node_modules/@material-tailwind/html/scripts/collapse.js"></script>
<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/html@latest/scripts/collapse.js"></script>