Published on

6 Easy Ways To Make A A Collapsibles Accordion With Tailwind CSS Without Even Thinking About It

A collapsibles accordion

If you're a FrontEnd technology blogger, you must have heard of Tailwind CSS, a utility-first CSS framework that helps you build responsive and custom designs quickly. With Tailwind CSS, you can easily create a collapsible accordion UI component without even thinking about it. In this article, we will explore six easy ways to make a collapsible accordion with Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides you with a set of pre-defined CSS classes that you can use to style your HTML elements. It allows you to build custom designs quickly by providing you with a comprehensive set of utility classes that you can use to style your elements.

The description of a collapsible accordion UI component

A collapsible accordion is a UI component that allows you to expand and collapse content sections. It is commonly used to display FAQs, product features, or any other content that needs to be organized in a compact way. When a user clicks on a section, it expands to reveal the content, and when they click again, it collapses.

Why use Tailwind CSS to create a collapsible accordion UI component?

Tailwind CSS makes it easy to create a collapsible accordion UI component because it provides you with a set of utility classes that you can use to style your HTML elements. You don't need to write any custom CSS code, which saves you time and effort. Additionally, Tailwind CSS is responsive by default, so your accordion will look great on any device.

The preview of a collapsible accordion UI component

To create a collapsible accordion UI component with Tailwind CSS, you can use a combination of HTML and CSS classes. The HTML structure consists of a container element that holds the accordion sections, and each section contains a header and a content element. You can use the following Tailwind CSS classes to style your accordion:

  • bg-gray-100: sets the background color of the accordion container to gray.
  • border: adds a border to the accordion container.
  • rounded-lg: rounds the corners of the accordion container.
  • shadow-md: adds a shadow to the accordion container.
  • cursor-pointer: sets the cursor to a pointer when hovering over the accordion headers.
  • transition-all: adds a smooth transition effect when expanding and collapsing the accordion sections.
  • transform: rotates the arrow icon when expanding and collapsing the accordion sections.

Free download of the A collapsibles accordion's source code

The source code of a collapsible accordion UI component

To create a collapsible accordion UI component with Tailwind CSS, you can use the following HTML and CSS code:

<!-- This is an example component -->

<style>
  .accordion {
    width: 100%;
  }

  .panel {
    display: none;
    overflow: hidden;
  }
</style>
<div class="mx-auto flex w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-md">
  <div class="mx-auto  my-2 bg-blue-200">
    <h2 class="bg-dark-800 p-4 text-center font-black">Accordion</h2>
    <button
      class="border-light-blue-500 accordion rounded-sm  border-4 border-solid bg-yellow-500 p-4 text-left font-black hover:bg-red-700 focus:bg-red-700"
    >
      Section 1
    </button>
    <div class="panel bg-blue-100 p-4">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
        ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat.
      </p>
    </div>

    <button
      class="border-light-blue-500 accordion rounded-sm border-4 border-solid bg-yellow-500 p-4 text-left font-black hover:bg-red-700 focus:bg-red-700"
    >
      Section 2
    </button>
    <div class="panel bg-blue-100 p-4">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
        ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat.
      </p>
    </div>

    <button
      class="border-light-blue-500 accordion rounded-sm border-4 border-solid bg-yellow-500 p-4 text-left font-black hover:bg-red-700 focus:bg-red-700"
    >
      Section 3
    </button>
    <div class="panel bg-blue-100 p-4">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
        ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat.
      </p>
    </div>
  </div>
</div>

<script>
  var accordElement = document.getElementsByClassName('accordion')

  for (i = 0; i < accordElement.length; i++) {
    accordElement[i].addEventListener('click', function () {
      this.classList.toggle('active')
      var panel = this.nextElementSibling
      if (panel.style.display === 'block') {
        panel.style.display = 'none'
      } else {
        panel.style.display = 'block'
      }
    })
  }
</script>

How to create a collapsible accordion with Tailwind CSS?

Now that we've seen the preview and source code of a collapsible accordion UI component, let's explore six easy ways to create one with Tailwind CSS.

1. Use the x-show directive

The x-show directive is a built-in directive in Alpine.js, a lightweight JavaScript library that allows you to add interactivity to your HTML elements. You can use the x-show directive to show or hide elements based on a condition. To create a collapsible accordion with the x-show directive, you can use the following code:

<div class="bg-gray-100 border rounded-lg shadow-md">
  <div class="p-4">
    <div class="flex items-center justify-between cursor-pointer" x-on:click="open = !open">
      <h2 class="text-lg font-medium">Accordion Header</h2>
      <svg class="w-4 h-4 transform" :class="{'rotate-180': open}" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M6.293 7.293a1 1 0 011.414 0L10 9.586l2.293-2.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <div class="mt-2" x-show="open">
      <p class="text-gray-700">Accordion Content</p>
    </div>
  </div>
</div>

In this code, we use the x-show directive to show or hide the accordion content based on the open variable. When the user clicks on the accordion header, we toggle the value of the open variable to show or hide the content. We also use the transform class to rotate the arrow icon when expanding and collapsing the accordion sections.

2. Use the x-data directive

The x-data directive is another built-in directive in Alpine.js that allows you to define data properties and methods for your HTML elements. You can use the x-data directive to create a collapsible accordion with a data property that tracks the open/closed state of the accordion. To create a collapsible accordion with the x-data directive, you can use the following code:

<div class="bg-gray-100 border rounded-lg shadow-md" x-data="{ open: false }">
  <div class="p-4">
    <div class="flex items-center justify-between cursor-pointer" x-on:click="open = !open">
      <h2 class="text-lg font-medium">Accordion Header</h2>
      <svg class="w-4 h-4 transform" :class="{'rotate-180': open}" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M6.293 7.293a1 1 0 011.414 0L10 9.586l2.293-2.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <div class="mt-2" x-show="open">
      <p class="text-gray-700">Accordion Content</p>
    </div>
  </div>
</div>

In this code, we use the x-data directive to define a data property called open that tracks the open/closed state of the accordion. We use the x-on:click directive to toggle the value of the open property when the user clicks on the accordion header. We also use the :class directive to add the rotate-180 class to the arrow icon when the accordion is open.

3. Use the x-init directive

The x-init directive is a built-in directive in Alpine.js that allows you to initialize data properties and methods when your HTML element is first loaded. You can use the x-init directive to create a collapsible accordion with an initialized data property that tracks the open/closed state of the accordion. To create a collapsible accordion with the x-init directive, you can use the following code:

<div class="bg-gray-100 border rounded-lg shadow-md" x-data="{ open: false }" x-init="open = true">
  <div class="p-4">
    <div class="flex items-center justify-between cursor-pointer" x-on:click="open = !open">
      <h2 class="text-lg font-medium">Accordion Header</h2>
      <svg class="w-4 h-4 transform" :class="{'rotate-180': open}" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M6.293 7.293a1 1 0 011.414 0L10 9.586l2.293-2.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <div class="mt-2" x-show="open">
      <p class="text-gray-700">Accordion Content</p>
    </div>
  </div>
</div>

In this code, we use the x-init directive to initialize the open property to true, which means that the accordion will be open by default. We use the x-on:click directive to toggle the value of the open property when the user clicks on the accordion header. We also use the :class directive to add the rotate-180 class to the arrow icon when the accordion is open.

4. Use the x-for directive

The x-for directive is a built-in directive in Alpine.js that allows you to loop through an array and render HTML elements for each item in the array. You can use the x-for directive to create a collapsible accordion with multiple sections. To create a collapsible accordion with the x-for directive, you can use the following code:

<div class="bg-gray-100 border rounded-lg shadow-md" x-data="{ sections: [{ title: 'Section 1', content: 'Content 1' }, { title: 'Section 2', content: 'Content 2' }] }">
  <template x-for="(section, index) in sections" :key="index">
    <div class="p-4">
      <div class="flex items-center justify-between cursor-pointer" x-on:click="section.open = !section.open">
        <h2 class="text-lg font-medium" x-text="section.title"></h2>
        <svg class="w-4 h-4 transform" :class="{'rotate-180': section.open}" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M6.293 7.293a1 1 0 011.414 0L10 9.586l2.293-2.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </div>
      <div class="mt-2" x-show="section.open">
        <p class="text-gray-700" x-text="section.content"></p>
      </div>
    </div>
  </template>
</div>

In this code, we use the x-data directive to define an array of sections, each containing a title and content property. We use the x-for directive to loop through the sections array and render an accordion section for each item in the array. We use the x-on:click directive to toggle the open property of each section when the user clicks on the accordion header.

5. Use the x-ref directive

The x-ref directive is a built-in directive in Alpine.js that allows you to reference an HTML element in your JavaScript code. You can use the x-ref directive to create a collapsible accordion with a reference to the accordion container, which allows you to manipulate the accordion from your JavaScript code. To create a collapsible accordion with the x-ref directive, you can use the following code:

<div class="bg-gray-100 border rounded-lg shadow-md" x-data="{ open: false }" x-ref="accordion">
  <div class="p-4">
    <div class="flex items-center justify-between cursor-pointer" x-on:click="open = !open">
      <h2 class="text-lg font-medium">Accordion Header</h2>
      <svg class="w-4 h-4 transform" :class="{'rotate-180': open}" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M6.293 7.293a1 1 0 011.414 0L10 9.586l2.293-2.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <div class="mt-2" x-show="open">
      <p class="text-gray-700">Accordion Content</p>
    </div>
  </div>
</div>

<script>
  const accordion = document.querySelector('[x-ref="accordion"]');
  // manipulate the accordion from your JavaScript code
</script>

In this code, we use the x-ref directive to reference the accordion container element. We can then manipulate the accordion from our JavaScript code by using the accordion variable.

6. Use the x-transition directive

The x-transition directive is a built-in directive in Alpine.js that allows you to add transition effects to your HTML elements. You can use the x-transition directive to create a collapsible accordion with a smooth transition effect when expanding and collapsing the sections. To create a collapsible accordion with the x-transition directive, you can use the following code:

<div class="bg-gray-100 border rounded-lg shadow-md" x-data="{ open: false }">
  <div class="p-4">
    <div class="flex items-center justify-between cursor-pointer" x-on:click="open = !open">
      <h2 class="text-lg font-medium">Accordion Header</h2>
      <svg class="w-4 h-4 transform" :class="{'rotate-180': open}" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M6.293 7.293a1 1 0 011.414 0L10 9.586l2.293-2.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <div class="mt-2" x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90">
      <p class="text-gray-700">Accordion Content</p>
    </div>
  </div>
</div>

In this code, we use the x-transition directive to add a smooth transition effect when expanding and collapsing the accordion sections. We use the x-transition:enter and x-transition:leave directives to define the enter and leave transitions, and we use the x-transition:enter-start, x-transition:enter-end, x-transition:leave-start, and x-transition:leave-end directives to define the start and end states of the transitions.

Conclusion

In this article, we explored six easy ways to make a collapsible accordion with Tailwind CSS. We saw how Tailwind CSS provides us with a set of utility classes that we can use to style our HTML elements, which makes it easy to create a custom design quickly. We also saw how we can use Alpine.js to add interactivity to our HTML elements and create a smooth transition effect when expanding and collapsing the accordion sections. With these techniques, you can create a professional-looking collapsible accordion UI component without even thinking about it.