Tailwind CSS Accordion

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

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 mb-3">
  <h6 class="mb-0">
    <button
      class="border-slate-100 text-slate-700 rounded-t-1 group relative flex w-full cursor-pointer items-center border-b border-solid p-4 text-left font-semibold text-dark-500 transition-all ease-in"
      data-collapse-target="collapse-1"
    >
      <span>What is Material Tailwind?</span>
      <i class="fa fa-plus absolute right-0 pt-1 text-xs group-open:opacity-0"></i>
      <i class="fa fa-minus absolute right-0 pt-1 text-xs opacity-0 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="border-slate-100 text-slate-700 rounded-t-1 group relative flex w-full cursor-pointer items-center border-b border-solid p-4 text-left font-semibold text-dark-500 transition-all ease-in"
      data-collapse-target="collapse-2"
    >
      <span>How to use Material Tailwind?</span>
      <i class="fa fa-plus absolute right-0 pt-1 text-xs group-open:opacity-0"></i>
      <i class="fa fa-minus absolute right-0 pt-1 text-xs opacity-0 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="border-slate-100 text-slate-700 rounded-t-1 group relative flex w-full cursor-pointer items-center border-b border-solid p-4 text-left font-semibold text-dark-500 transition-all ease-in"
      data-collapse-target="collapse-3"
    >
      <span>What can I do with Material Tailwind?</span>
      <i class="fa fa-plus absolute right-0 pt-1 text-xs group-open:opacity-0"></i>
      <i class="fa fa-minus absolute right-0 pt-1 text-xs opacity-0 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>

Custom Accordion Icon

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.

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 mb-3">
  <h6 class="mb-0">
    <button
      class="border-slate-100 text-slate-700 rounded-t-1 group relative flex w-full cursor-pointer items-center border-b border-solid p-4 text-left font-semibold text-dark-500 transition-all ease-in"
      data-collapse-target="animated-collapse-1"
    >
      <span>What is Material Tailwind?</span>
      <i class="fa fa-chevron-down absolute right-0 pt-1 text-base transition-transform 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="border-slate-100 text-slate-700 rounded-t-1 group relative flex w-full cursor-pointer items-center border-b border-solid p-4 text-left font-semibold text-dark-500 transition-all ease-in"
      data-collapse-target="animated-collapse-2"
    >
      <span>How to use Material Tailwind?</span>
      <i class="fa fa-chevron-down absolute right-0 pt-1 text-base transition-transform 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="border-slate-100 text-slate-700 rounded-t-1 group relative flex w-full cursor-pointer items-center border-b border-solid p-4 text-left font-semibold text-dark-500 transition-all ease-in"
      data-collapse-target="animated-collapse-3"
    >
      <span>What can I do with Material Tailwind?</span>
      <i class="fa fa-chevron-down absolute right-0 pt-1 text-base transition-transform 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>

Disabled Accordion

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 mb-3">
  <h6 class="pointer-events-none relative block w-full opacity-50">
    <button
      class="flex w-full select-none items-center justify-between border-b border-b-blue-gray-100 py-4 font-sans text-xl font-semibold leading-snug text-blue-gray-700 antialiased transition-colors hover:text-blue-gray-900"
      data-collapse-target="disabled-collapse-1"
    >
      <span>What is Material Tailwind?</span>
      <i class="fa fa-plus absolute right-0 pt-1 text-xs group-open:opacity-0"></i>
      <i class="fa fa-minus absolute right-0 pt-1 text-xs opacity-0 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="border-slate-100 text-slate-700 rounded-t-1 group relative flex w-full cursor-pointer items-center border-b border-solid p-4 text-left font-semibold text-dark-500 transition-all ease-in"
      data-collapse-target="disabled-collapse-2"
    >
      <span>How to use Material Tailwind?</span>
      <i class="fa fa-plus absolute right-0 pt-1 text-xs group-open:opacity-0"></i>
      <i class="fa fa-minus absolute right-0 pt-1 text-xs opacity-0 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="border-slate-100 text-slate-700 rounded-t-1 group relative flex w-full cursor-pointer items-center border-b border-solid p-4 text-left font-semibold text-dark-500 transition-all ease-in"
      data-collapse-target="disabled-collapse-3"
    >
      <span>What can I do with Material Tailwind?</span>
      <i class="fa fa-plus absolute right-0 pt-1 text-xs group-open:opacity-0"></i>
      <i class="fa fa-minus absolute right-0 pt-1 text-xs opacity-0 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>

Accordion Trigger Data Attributes

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.

Accordion Data Attributes

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.

Required Scrips

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>

screens

alert

Edit this page on Github