Tailwind CSS Accordion Example

The accordion is a user interface pattern where a list of items is collapsed or expanded on user interaction to show/hide content. This accordion code example creates a smooth accordion using Alpine.js and Tailwind CSS, which displays a list of FAQs and expands/collapses the answers on user interaction. You can integrate this accordion for FAQs, content summaries, or collapsible content on the webpage.

How to Create Tailwind Css Accordion Example

First of all, load the Tailwind CSS by adding the following CDN into the head tag of your webpage.

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/tailwindcss@1.4.6/dist/tailwind.css'>

Now, create the HTML structure for the accordion as follows:

<div class="bg-gray-100 pt-10 px-3 pb-20">
  <h1 class="text-gray-600 text-center">
    <div class="font-bold">
      Smooth Accordion
    </div>
    using Alpine.js (w/ x-for) + Tailwind CSS
  </h1>

  <div class="my-10 max-w-2xl mx-auto space-y-4 lg:space-y-6" x-data="{ faq, faq_selected: null }">

    <template x-for="(item, index) in faq" :key="`item-{$index}`">

      <div class="item bg-white shadow-md rounded-md p-3">
        <div class="flex items-center cursor-pointer" @click="faq_selected !== index ? faq_selected = index : faq_selected = null">
          <div class="bg-indigo-100 text-indigo-400 w-8 h-8 md:w-10 md:h-10 rounded-md flex items-center justify-center font-bold text-lg font-display">
            <span x-text="index + 1"></span>
          </div>
          <div class="ml-3 md:ml-4 lg:ml-6 md:text-lg text-indigo-600">
            <span x-text="item.question"></span>
          </div>
        </div>
        <div class="relative overflow-hidden transition-all max-h-0 duration-700" x-bind:style="faq_selected === index ? `max-height:  ${ $el.scrollHeight }px` : ``">
          <div class="text-gray-700 ml-8 md:ml-10 pl-3 md:pl-4 lg:pl-6 py-2 space-y-3">

            <template x-for="(ans, index) in item.answer" :key="`item-ans-{$index}`">
              <p x-text="ans"></p>
            </template>

          </div>
        </div>
      </div>

    </template>

  </div>
</div>

Basically, this accordion uses the default styles provided by Tailwind CSS. Anyhow, you just need to define a class name with a max height of 0 to hide the content on page load. If you want to customize the accordion, you can define your own CSS.

.max-h-0 {
  max-height: 0
}

Load the Alpine JS by adding the following CDN link before closing the body tag:

<script src='https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js'></script>

Finally, define an array of object in JavaScript with question and answer values and add it just after the Alpine JS between the <script> and </script> tags.

const faq = [
  {
    question: "What is Alpine.js?",
    answer: [
      "Bacon ipsum dolor amet boudin hamburger jerky spare ribs, bacon leberkas beef ribs sausage turkey pancetta tenderloin chicken.",
      "Meatball landjaeger turducken. Bacon bresaola tenderloin cow rump pork chop."
    ]
  },
  {
    question: "Is it difficult to learn?",
    answer: [
      "Boudin sausage hamburger tenderloin beef chislic prosciutto pancetta. Beef tongue pork meatloaf.",
      "Chicken pork chop turducken ground round. Shank bresaola burgdoggen short loin ham hock ham. Boudin tri-tip swine drumstick strip steak tail."
    ]
  },
  {
    question: "How can I use this code?",
    answer: [
      "Salami filet mignon strip steak venison rump chicken bresaola. Shank flank tongue ribeye. Beef pork chop sirloin venison chicken jowl.",
      "Doner corned beef kielbasa beef ribs ground round cow salami swine."
    ]
  }
];

That’s all! hopefully, you have successfully created an accordion using Tailwind CSS. If you have any questions or suggestions, feel free to comment below.