Material Tailwind offers a robust accordion component built with Tailwind CSS that is perfect for situations where you need to integrate expand/collapse design.
The accordion is a UI component that allows 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.
We created a series of accordion examples to help you build easier your application or website. All these examples are styled with Tailwind CSS and based on Material Design. Check them below.
This example features an expand - collapse icon that toggles between a plus sign to denote expansion and a minus sign for collapse.
This visual cue is simple, providing users with a clear indication of how to interact with the 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="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 the open and closed states of the 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>The example is a type of accordion which indicates that certain sections of content are currently inaccessible.
<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>Use this Tailwind CSS accordion to maintain a clean layout while signaling to users that some information or options are not available for interaction at the moment (eg. content is released in stages, or user actions are required to unlock certain functionalities).
The example is a type of nested accordion.
export function NestedAccordion() {
return (
<>
<div class="relative mt-1 mb-7">
<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 class="relative ">
<h6 class="">
<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-4"
>
<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-4"
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>
</div>
</div>
<div class="relative mb-3.5 mt-1">
<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.5 mt-1">
<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>
</>
);
}
The following attributes are used to handle the show/hide functionality of accordion components without needing to write lots of custom code. By using these data attributes, developers can easily link the accordion buttons (triggers) with the content sections they control.
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 the 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>• Indicate which sections are expanded or collapsed - you can use icons like plus and minus.
• For a smoother UX, use Tailwind CSS basic transitions and animations to animate the opening and closing of accordion sections.
• Allow users to expand multiple sections simultaneously. If not, ensure that expanding one section collapses any previously expanded section.
• Make sure that the sections don't contain too large amounts of content
• Test your accordion to work consistently across different browsers and devices