Tailwind Acordion

Free

Tailwind accordion component with Alpine.js

Tailwind Acordion Image 1
Details About Tailwind Acordion
Key points:
  • Open Source
  • JavaScript Plugin
  • Copy & Paste
  • Tailwind CSS v3.0+
  • Responsive Design

 Code Example


  <body class="flex items-center justify-center min-h-screen bg-gray-50">
    <div x-data="{ activeAccordion: null, setActiveAccordion(id) { this.activeAccordion = this.activeAccordion === id ? null : id } }" class="w-full max-w-xl mx-auto overflow-hidden text-sm bg-white border border-gray-200 divide-y divide-gray-200 rounded-md">
      <div x-data="{ id: 'accordion1' }" class="cursor-pointer group">
        <button @click="setActiveAccordion(id)" class="flex items-center justify-between w-full p-4 text-left select-none group-hover:underline">
          <span>What is Tailwind CSS?</span>
          <svg class="w-4 h-4 transition-transform duration-200 ease-out" :class="{ 'rotate-180': activeAccordion === id }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <polyline points="6 9 12 15 18 9"></polyline>
          </svg>
        </button>
        <div x-show="activeAccordion === id" x-collapse x-cloak>
          <div class="p-4 pt-0 text-gray-600">
            Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.
          </div>
        </div>
      </div>
      <div x-data="{ id: 'accordion2' }" class="cursor-pointer group">
        <button @click="setActiveAccordion(id)" class="flex items-center justify-between w-full p-4 text-left select-none group-hover:underline">
          <span>How do I install Tailwind CSS?</span>
          <svg class="w-4 h-4 transition-transform duration-200 ease-out" :class="{ 'rotate-180': activeAccordion === id }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <polyline points="6 9 12 15 18 9"></polyline>
          </svg>
        </button>
        <div x-show="activeAccordion === id" x-collapse x-cloak>
          <div class="p-4 pt-0 text-gray-600">
            You can install Tailwind CSS via npm, yarn, or by using a CDN.
          </div>
        </div>
      </div>
      <div x-data="{ id: 'accordion3' }" class="cursor-pointer group">
        <button @click="setActiveAccordion(id)" class="flex items-center justify-between w-full p-4 text-left select-none group-hover:underline">
          <span>Can I use Tailwind CSS with other frameworks?</span>
          <svg class="w-4 h-4 transition-transform duration-200 ease-out" :class="{ 'rotate-180': activeAccordion === id }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <polyline points="6 9 12 15 18 9"></polyline>
          </svg>
        </button>
        <div x-show="activeAccordion === id" x-collapse x-cloak>
          <div class="p-4 pt-0 text-gray-600">
            Absolutely! Tailwind CSS can be used with any front-end framework or library.
          </div>
        </div>
      </div>
    </div>
  </body>

FAQ

Why aren't Alpine.js functions working?

Make sure you've correctly included Alpine.js and Tailwind CSS in your project. Check your browser's console for any error messages and verify that your scripts are loaded in the correct order.

How do I install Alpine.js into my project?

To install Alpine.js in your project, you can use a CDN by adding a script tag to your HTML file. Alternatively, you can install it via npm by running the appropriate command in your terminal and then importing it into your JavaScript file. Visit alpinejs.dev/essentials/installation for the official install gudie.

Featured Tailwind Components

Discover the most popular Tailwind CSS ui components and elements. Browse top-notch Tailwind components to enhance your development process.