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. If you have the opportunity to play this game of life you need to appreciate every moment. A lot of people don't appreciate the moment until it's passed.

It really matters and then like it really doesn't matter. What matters is the people who are sparked by it. And the people who are like offended by it, it doesn't matter. Because it's about motivating the doers. Because I'm here to follow my dreams and inspire other people to follow their dreams, too.

The time is now for it to be okay to be great. People in this world shun people for being great. For being a bright color. For standing out. But the time is now to be okay to be the greatest you. Would you believe in what you believe in, if you were the only one who believed it? If everything I did failed - which it doesn't, it actually succeeds - just the fact that I'm willing to fail is an inspiration. People are so scared to lose that they don't even try. Like, one thing people can't say is that I'm not trying, and I'm not trying my hardest, and I'm not trying to do the best way I know how.

I always felt like I could do anything. That's the main thing people are controlled by! Thoughts- their perception of themselves! They're slowed down by their perception of themselves. If you're taught you can't do anything, you won't do anything. I was taught I could do everything.

I always felt like I could do anything. That's the main thing people are controlled by! Thoughts- their perception of themselves! They're slowed down by their perception of themselves. If you're taught you can't do anything, you won't do anything. I was taught I could do everything.

<div class="accordion">
  <div class="accordion-item relative mb-3">
    <h6 class="mb-0">
      <button
        class="accordion-button text-left font-semibold"
        type="button"
        aria-expanded="false"
      >
        <span>How do I order?</span>
        <i class="fa fa-plus collapse-close absolute right-0 pt-1 text-xs"></i>
        <i class="fa fa-minus collapse-open absolute right-0 pt-1 text-xs"></i>
      </button>
    </h6>
    <div class="collapse open">
      <div class="py-4 text-sm opacity-60">
        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. If you have the opportunity
        to play this game of life you need to appreciate every moment. A lot of
        people don't appreciate the moment until it's passed.
      </div>
    </div>
  </div>
  <div class="accordion-item relative mb-3">
    <h6 class="accordion-header">
      <button
        class="accordion-button collapsed text-left font-semibold"
        type="button"
        aria-expanded="false"
      >
        <span>How can i make the payment?</span>
        <i class="fa fa-plus collapse-close absolute right-0 pt-1 text-xs"></i>
        <i class="fa fa-minus collapse-open absolute right-0 pt-1 text-xs"></i>
      </button>
    </h6>
    <div class="collapse">
      <div class="py-4 text-sm opacity-60">
        It really matters and then like it really doesn't matter. What matters
        is the people who are sparked by it. And the people who are like
        offended by it, it doesn't matter. Because it's about motivating the
        doers. Because I'm here to follow my dreams and inspire other people to
        follow their dreams, too.
      </div>
    </div>
  </div>
  <div class="accordion-item relative mb-3">
    <h6 class="accordion-header">
      <button
        class="accordion-button collapsed text-left font-semibold"
        type="button"
        aria-expanded="false"
      >
        <span>How much time does it take to receive the order?</span>
        <i class="fa fa-plus collapse-close absolute right-0 pt-1 text-xs"></i>
        <i class="fa fa-minus collapse-open absolute right-0 pt-1 text-xs"></i>
      </button>
    </h6>
    <div class="collapse">
      <div class="py-4 text-sm opacity-60">
        The time is now for it to be okay to be great. People in this world shun
        people for being great. For being a bright color. For standing out. But
        the time is now to be okay to be the greatest you. Would you believe in
        what you believe in, if you were the only one who believed it? If
        everything I did failed - which it doesn't, it actually succeeds - just
        the fact that I'm willing to fail is an inspiration. People are so
        scared to lose that they don't even try. Like, one thing people can't
        say is that I'm not trying, and I'm not trying my hardest, and I'm not
        trying to do the best way I know how.
      </div>
    </div>
  </div>
  <div class="accordion-item relative mb-3">
    <h6 class="accordion-header">
      <button
        class="accordion-button collapsed text-left font-semibold"
        type="button"
        aria-expanded="false"
      >
        <span>Can I resell the products?</span>
        <i class="fa fa-plus collapse-close absolute right-0 pt-1 text-xs"></i>
        <i class="fa fa-minus collapse-open absolute right-0 pt-1 text-xs"></i>
      </button>
    </h6>
    <div class="collapse">
      <div class="py-4 text-sm opacity-60">
        I always felt like I could do anything. That's the main thing people are
        controlled by! Thoughts- their perception of themselves! They're slowed
        down by their perception of themselves. If you're taught you can't do
        anything, you won't do anything. I was taught I could do everything.
      </div>
    </div>
  </div>
  <div class="accordion-item relative mb-3">
    <h6 class="accordion-header">
      <button
        class="accordion-button collapsed text-left font-semibold"
        type="button"
        aria-expanded="false"
      >
        <span>Where do I find the shipping details?</span>
        <i class="fa fa-plus collapse-close absolute right-0 pt-1 text-xs"></i>
        <i class="fa fa-minus collapse-open absolute right-0 pt-1 text-xs"></i>
      </button>
    </h6>
    <div class="collapse">
      <div class="py-4 text-sm opacity-60">
        I always felt like I could do anything. That's the main thing people are
        controlled by! Thoughts- their perception of themselves! They're slowed
        down by their perception of themselves. If you're taught you can't do
        anything, you won't do anything. I was taught I could do everything.
      </div>
    </div>
  </div>
</div>

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/[email protected]/scripts/collapse.js"></script>
Edit this page on Github