Tailwind CSS Accordion

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.

Accordion Examples:

Accordion with Plus Minus Icon

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.

Material Tailwind is a framework that enhances Tailwind CSS with additional styles and components.

You can use Material Tailwind by importing its components into your Tailwind CSS project.

Material Tailwind allows you to quickly build modern, responsive websites with a focus on design.

  
<!-- Accordion Item 1 -->
<div class="border-b border-slate-200">
  <button onclick="toggleAccordion(1)" class="w-full flex justify-between items-center py-5 text-slate-800">
    <span>What is Material Tailwind?</span>
    <span id="icon-1" class="text-slate-800 transition-transform duration-300">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
        <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
      </svg>
    </span>
  </button>
  <div id="content-1" class="max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
    <div class="pb-5 text-sm text-slate-500">
      Material Tailwind is a framework that enhances Tailwind CSS with additional styles and components.
    </div>
  </div>
</div>
 
<!-- Accordion Item 2 -->
<div class="border-b border-slate-200">
  <button onclick="toggleAccordion(2)" class="w-full flex justify-between items-center py-5 text-slate-800">
    <span>How to use Material Tailwind?</span>
    <span id="icon-2" class="text-slate-800 transition-transform duration-300">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
        <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
      </svg>
    </span>
  </button>
  <div id="content-2" class="max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
    <div class="pb-5 text-sm text-slate-500">
      You can use Material Tailwind by importing its components into your Tailwind CSS project.
    </div>
  </div>
</div>
 
<!-- Accordion Item 3 -->
<div class="border-b border-slate-200">
  <button onclick="toggleAccordion(3)" class="w-full flex justify-between items-center py-5 text-slate-800">
    <span>What can I do with Material Tailwind?</span>
    <span id="icon-3" class="text-slate-800 transition-transform duration-300">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
        <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
      </svg>
    </span>
  </button>
  <div id="content-3" class="max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
    <div class="pb-5 text-sm text-slate-500">
      Material Tailwind allows you to quickly build modern, responsive websites with a focus on design.
    </div>
  </div>
</div>
 
<script>
  function toggleAccordion(index) {
    const content = document.getElementById(`content-${index}`);
    const icon = document.getElementById(`icon-${index}`);
 
    // SVG for Minus icon
    const minusSVG = `
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
        <path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
      </svg>
    `;
 
    // SVG for Plus icon
    const plusSVG = `
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
        <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
      </svg>
    `;
 
    // Toggle the content's max-height for smooth opening and closing
    if (content.style.maxHeight && content.style.maxHeight !== '0px') {
      content.style.maxHeight = '0';
      icon.innerHTML = plusSVG;
    } else {
      content.style.maxHeight = content.scrollHeight + 'px';
      icon.innerHTML = minusSVG;
    }
  }
</script>

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 the open and closed states of the accordion.

Material Tailwind is a framework that enhances Tailwind CSS with additional styles and components.

You can use Material Tailwind by importing its components into your Tailwind CSS project.

Material Tailwind allows you to quickly build modern, responsive websites with a focus on design.

  <!-- Accordion Item 1 -->
<div class="border-b border-slate-200">
  <button onclick="toggleAccordion(1)" class="w-full flex justify-between items-center py-5 text-slate-800">
    <span>What is Material Tailwind?</span>
    <span id="icon-1" class="text-slate-800 transition-transform duration-300">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
        <path fill-rule="evenodd" d="M11.78 9.78a.75.75 0 0 1-1.06 0L8 7.06 5.28 9.78a.75.75 0 0 1-1.06-1.06l3.25-3.25a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06Z" clip-rule="evenodd" />
      </svg>
    </span>
  </button>
  <div id="content-1" class="max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
    <div class="pb-5 text-sm text-slate-500">
      Material Tailwind is a framework that enhances Tailwind CSS with additional styles and components.
    </div>
  </div>
</div>
 
<!-- Accordion Item 2 -->
<div class="border-b border-slate-200">
  <button onclick="toggleAccordion(2)" class="w-full flex justify-between items-center py-5 text-slate-800">
    <span>How to use Material Tailwind?</span>
    <span id="icon-2" class="text-slate-800 transition-transform duration-300">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
        <path fill-rule="evenodd" d="M11.78 9.78a.75.75 0 0 1-1.06 0L8 7.06 5.28 9.78a.75.75 0 0 1-1.06-1.06l3.25-3.25a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06Z" clip-rule="evenodd" />
      </svg>
    </span>
  </button>
  <div id="content-2" class="max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
    <div class="pb-5 text-sm text-slate-500">
      You can use Material Tailwind by importing its components into your Tailwind CSS project.
    </div>
  </div>
</div>
 
<!-- Accordion Item 3 -->
<div class="border-b border-slate-200">
  <button onclick="toggleAccordion(3)" class="w-full flex justify-between items-center py-5 text-slate-800">
    <span>What can I do with Material Tailwind?</span>
    <span id="icon-3" class="text-slate-800 transition-transform duration-300">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
        <path fill-rule="evenodd" d="M11.78 9.78a.75.75 0 0 1-1.06 0L8 7.06 5.28 9.78a.75.75 0 0 1-1.06-1.06l3.25-3.25a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06Z" clip-rule="evenodd" />
      </svg>
    </span>
  </button>
  <div id="content-3" class="max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
    <div class="pb-5 text-sm text-slate-500">
      Material Tailwind allows you to quickly build modern, responsive websites with a focus on design.
    </div>
  </div>
</div>
 
<script>
  function toggleAccordion(index) {
    const content = document.getElementById(`content-${index}`);
    const icon = document.getElementById(`icon-${index}`);
 
    // SVG for Down icon
    const downSVG = `
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
        <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
      </svg>
    `;
 
    // SVG for Up icon
    const upSVG = `
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
        <path fill-rule="evenodd" d="M11.78 9.78a.75.75 0 0 1-1.06 0L8 7.06 5.28 9.78a.75.75 0 0 1-1.06-1.06l3.25-3.25a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06Z" clip-rule="evenodd" />
      </svg>
    `;
 
    // Toggle the content's max-height for smooth opening and closing
    if (content.style.maxHeight && content.style.maxHeight !== '0px') {
      content.style.maxHeight = '0';
      icon.innerHTML = upSVG;
    } else {
      content.style.maxHeight = content.scrollHeight + 'px';
      icon.innerHTML = downSVG;
    }
  }
</script>

Disabled Accordion

The example is a type of accordion which indicates that certain sections of content are currently inaccessible.

Material Tailwind is a framework that enhances Tailwind CSS with additional styles and components.

You can use Material Tailwind by importing its components into your Tailwind CSS project.

Material Tailwind allows you to quickly build modern, responsive websites with a focus on design.

 
<!-- Accordion Item 1 -->
<div class="border-b border-slate-200">
  <button disabled onclick="toggleAccordion(1)" class="w-full flex justify-between items-center py-5 text-slate-400 cursor-not-allowed">
    <span>What is Material Tailwind?</span>
    <span id="icon-1" class="text-slate-400 transition-transform duration-300">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
        <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
      </svg>
    </span>
  </button>
  <div id="content-1" class="max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
    <div class="pb-5 text-sm text-slate-500">
      Material Tailwind is a framework that enhances Tailwind CSS with additional styles and components.
    </div>
  </div>
</div>
 
<!-- Accordion Item 2 -->
<div class="border-b border-slate-200">
  <button onclick="toggleAccordion(2)" class="w-full flex justify-between items-center py-5 text-slate-800">
    <span>How to use Material Tailwind?</span>
    <span id="icon-2" class="text-slate-800 transition-transform duration-300">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
        <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
      </svg>
    </span>
  </button>
  <div id="content-2" class="max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
    <div class="pb-5 text-sm text-slate-500">
      You can use Material Tailwind by importing its components into your Tailwind CSS project.
    </div>
  </div>
</div>
 
<!-- Accordion Item 3 -->
<div class="border-b border-slate-200">
  <button onclick="toggleAccordion(3)" class="w-full flex justify-between items-center py-5 text-slate-800">
    <span>What can I do with Material Tailwind?</span>
    <span id="icon-3" class="text-slate-800 transition-transform duration-300">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
        <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
      </svg>
    </span>
  </button>
  <div id="content-3" class="max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
    <div class="pb-5 text-sm text-slate-500">
      Material Tailwind allows you to quickly build modern, responsive websites with a focus on design.
    </div>
  </div>
</div>
 
<script>
  function toggleAccordion(index) {
    const content = document.getElementById(`content-${index}`);
    const icon = document.getElementById(`icon-${index}`);
 
    // SVG for Minus icon
    const minusSVG = `
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
        <path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
      </svg>
    `;
 
    // SVG for Plus icon
    const plusSVG = `
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
        <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
      </svg>
    `;
 
    // Toggle the content's max-height for smooth opening and closing
    if (content.style.maxHeight && content.style.maxHeight !== '0px') {
      content.style.maxHeight = '0';
      icon.innerHTML = plusSVG;
    } else {
      content.style.maxHeight = content.scrollHeight + 'px';
      icon.innerHTML = minusSVG;
    }
  }
</script>

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

Explore More Tailwind CSS Examples

Looking for more accordion examples? Check out our FAQs examples from Material Tailwind Blocks.

Accordion Best Practices for Developers

• 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