tailwind css collapse example

In this tutorial, we see how to use collapse in tailwind css by using alpine js and alpinejs collapse plugin. we will create collapse button, collapse duration, tailwind css collapse with minus plus icon, Also we will create Accordion (Faq) example.


Syntax 

<div x-data="{ expanded: false }">
  <button @click="expanded = ! expanded">Show Content</button>
 
  <p x-show="expanded" x-collapse>
    lorem ispm
  </p>
</div>


Example 1

Tailwind CSS simple collapse button with alpine js.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tailwindcss with alpinejs collapse button</title>
    <link
      href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <!-- Alpine collapse Plugins -->
    <script
      defer
      src="https://unpkg.com/@alpinejs/[email protected]/dist/cdn.min.js"
    ></script>

    <!-- Alpine CDN -->
    <script
      defer
      src="https://unpkg.com/[email protected]/dist/cdn.min.js"
    ></script>
  </head>

  <body>
    <div class="container mx-auto mt-8">
      <div
        x-data="{ 
          collapseButton: false,
        }"
        class="p-6 mx-auto bg-white"
      >
        <div>
          <button
            @click="collapseButton = ! collapseButton"
            class="px-4 py-2 text-blue-100 bg-blue-600 outline-none"
          >
            Collapse Button
          </button>
          <p x-show="collapseButton" class="p-1 shadow" x-collapse>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure nobis,
            quas illo ea, consequatur omnis ut alias laboriosam autem soluta ex
            eligendi inventore velit modi exercitationem labore ipsa odit
            reprehenderit.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>


Tailwind CSS simple collapse button with alpine js.

Tailwind CSS simple collapse button with alpine js.


Example 2

Tailwind CSS delay collapse focus button with alpine js.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tailwindcss with alpinejs collapse focus button</title>
    <link
      href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <!-- Alpine collapse Plugins -->
    <script
      defer
      src="https://unpkg.com/@alpinejs/[email protected]/dist/cdn.min.js"
    ></script>

    <!-- Alpine CDN -->
    <script
      defer
      src="https://unpkg.com/[email protected]/dist/cdn.min.js"
    ></script>
  </head>

  <body>
    <div class="container mx-auto mt-8">
      <div
        x-data="{ 
          collapseButton: false,
          focusClass: 'focus:ring-4 focus:outline-none focus:ring-blue-100 rounded-md'
        }"
        class="p-6 mx-auto bg-white"
      >
        <div>
          <button
            @click="collapseButton = ! collapseButton"
            :class="collapseButton === true ? focusClass : ''"
            class="px-4 py-2 text-blue-100 bg-blue-600"
          >
            Collapse Button
          </button>
          <p
            x-show="collapseButton"
            :class="collapseButton === true ? focusClass : ''"
            class="p-1 shadow"
            x-collapse.duration.1000ms
          >
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure nobis,
            quas illo ea, consequatur omnis ut alias laboriosam autem soluta ex
            eligendi inventore velit modi exercitationem labore ipsa odit
            reprehenderit.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>
Tailwind CSS delay collapse focus button with alpine js.

Tailwind CSS delay collapse focus button with alpine js.



Example 3

Tailwind CSS create accordion (faq) collapse with alpinejs collapse plugin. Also plus minus Icon.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
      Tailwind CSS Accordion (Faq) Example with Alpine js
    </title>
    <link
      href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <!-- Alpine Collasp Plugins -->
    <script
      defer
      src="https://unpkg.com/@alpinejs/[email protected]/dist/cdn.min.js"
    ></script>

    <!-- Alpine Core -->
    <script
      defer
      src="https://unpkg.com/[email protected]/dist/cdn.min.js"
    ></script>
  </head>

  <body>
    <div class="container mx-auto mt-8">
      <div
        class="max-w-2xl"
        x-data="{ 
            faqOne: false,
            faqTwo: false,
            faqThree: false,
            activeClass: 'bg-indigo-800 focus:outline-none',
        }"
        class="p-6 mx-auto bg-white"
      >
        <div class="mb-4">
          <div
            @click="faqOne = ! faqOne"
            :class="faqOne === true ? activeClass : ''"
            class="flex items-center justify-between w-full py-3 pl-3 pr-2 font-bold text-indigo-100 bg-indigo-500 rounded cursor-pointer hover:text-indigo-100"
          >
            How to install  tailwind in vue 3
            <span
              class="flex items-center justify-center w-6 h-6"
            >
              <svg
              :class="faqOne === true ? 'block' : 'hidden'"
                class="w-3 h-3 fill-current"
                viewBox="0 -192 469.33333 469"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m437.332031.167969h-405.332031c-17.664062 0-32 14.335937-32 32v21.332031c0 17.664062 14.335938 32 32 32h405.332031c17.664063 0 32-14.335938 32-32v-21.332031c0-17.664063-14.335937-32-32-32zm0 0"
                />
              </svg>
              <svg
              :class="faqOne === false ? 'block' : 'hidden'"
              
                class="w-3 h-3 fill-current"
                viewBox="0 0 469.33333 469.33333"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m437.332031 192h-160v-160c0-17.664062-14.335937-32-32-32h-21.332031c-17.664062 0-32 14.335938-32 32v160h-160c-17.664062 0-32 14.335938-32 32v21.332031c0 17.664063 14.335938 32 32 32h160v160c0 17.664063 14.335938 32 32 32h21.332031c17.664063 0 32-14.335937 32-32v-160h160c17.664063 0 32-14.335937 32-32v-21.332031c0-17.664062-14.335937-32-32-32zm0 0"
                />
            </span>
          </div>
          <div x-show="faqOne" x-collapse>
            <p class="text-gray-600">
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum ex excepturi vel? Ullam rerum magni, maiores dolorem omnis voluptates quibusdam ipsam provident. Sed aliquam quisquam consequatur sint aspernatur nesciunt fugit.
            </p>
          </div>
        </div>
        <div class="mb-4">
          <div
            @click="faqTwo = ! faqTwo"
            :class="faqTwo === true ? activeClass : ''"
            class="flex items-center justify-between w-full py-3 pl-3 pr-2 font-bold text-indigo-100 bg-indigo-500 rounded cursor-pointer hover:text-indigo-100"
          >
            How to install Alpine js in Laravel ?
            <span
              class="flex items-center justify-center w-6 h-6"
            >
              <svg
              :class="faqTwo === true ? 'block' : 'hidden'"
                class="w-3 h-3 fill-current"
                viewBox="0 -192 469.33333 469"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m437.332031.167969h-405.332031c-17.664062 0-32 14.335937-32 32v21.332031c0 17.664062 14.335938 32 32 32h405.332031c17.664063 0 32-14.335938 32-32v-21.332031c0-17.664063-14.335937-32-32-32zm0 0"
                />
              </svg>
              <svg
              :class="faqTwo === false ? 'block' : 'hidden'"
              
                class="w-3 h-3 fill-current"
                viewBox="0 0 469.33333 469.33333"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m437.332031 192h-160v-160c0-17.664062-14.335937-32-32-32h-21.332031c-17.664062 0-32 14.335938-32 32v160h-160c-17.664062 0-32 14.335938-32 32v21.332031c0 17.664063 14.335938 32 32 32h160v160c0 17.664063 14.335938 32 32 32h21.332031c17.664063 0 32-14.335937 32-32v-160h160c17.664063 0 32-14.335937 32-32v-21.332031c0-17.664062-14.335937-32-32-32zm0 0"
                />
            </span>
          </div>
          <div x-show="faqTwo" x-collapse.duration.500ms>
            <p class="text-gray-600">
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum ex excepturi vel? Ullam rerum magni, maiores dolorem omnis voluptates quibusdam ipsam provident. Sed aliquam quisquam consequatur sint aspernatur nesciunt fugit.
            </p>
          </div>
        </div>
        <div class="mb-4">
          <div
            @click="faqThree = ! faqThree"
            :class="faqThree === true ? activeClass : ''"
            class="flex items-center justify-between w-full py-3 pl-3 pr-2 font-bold text-indigo-100 bg-indigo-500 rounded cursor-pointer hover:text-indigo-100"
          >
            How to install Laravel ?
            <span
              class="flex items-center justify-center w-6 h-6"
            >
              <svg
              :class="faqThree === true ? 'block' : 'hidden'"
                class="w-3 h-3 fill-current"
                viewBox="0 -192 469.33333 469"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m437.332031.167969h-405.332031c-17.664062 0-32 14.335937-32 32v21.332031c0 17.664062 14.335938 32 32 32h405.332031c17.664063 0 32-14.335938 32-32v-21.332031c0-17.664063-14.335937-32-32-32zm0 0"
                />
              </svg>
              <svg
              :class="faqThree === false ? 'block' : 'hidden'"
              
                class="w-3 h-3 fill-current"
                viewBox="0 0 469.33333 469.33333"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m437.332031 192h-160v-160c0-17.664062-14.335937-32-32-32h-21.332031c-17.664062 0-32 14.335938-32 32v160h-160c-17.664062 0-32 14.335938-32 32v21.332031c0 17.664063 14.335938 32 32 32h160v160c0 17.664063 14.335938 32 32 32h21.332031c17.664063 0 32-14.335937 32-32v-160h160c17.664063 0 32-14.335937 32-32v-21.332031c0-17.664062-14.335937-32-32-32zm0 0"
                />
            </span>
          </div>
          <div x-show="faqThree" x-collapse.duration.1000ms>
            <p class="text-gray-600">
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum ex excepturi vel? Ullam rerum magni, maiores dolorem omnis voluptates quibusdam ipsam provident. Sed aliquam quisquam consequatur sint aspernatur nesciunt fugit.
            </p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
accordion (faq) collapse with alpinejs collapse  plugin

accordion (faq) collapse with alpinejs collapse plugin


Read Also

Tailwind CSS 3 FAQ Accordion UI Example

Tailwind CSS 3 Alert Message Example

Tailwind CSS 3 Avatars Example

Tailwind CSS 3 Badges Example

Tailwind CSS 3 Breadcrumb Example

Tailwind CSS v3 Button Examples

Tailwind CSS Gradient Button Example

Tailwind CSS 3D Button Example

Tailwind CSS Loading Button Example

Tailwind CSS v3 Cards Examples

Tailwind CSS Checkbox Form Examples

Tailwind CSS Dropdowns (Menu) on Hover Example

Tailwind CSS Multiselect Dropdown Example

How to use dark mode toggle switch in Tailwind CSS 3

How to use @apply directive in Tailwind CSS

Tailwind CSS sticky header & fixed navbar example

Tailwind CSS Navbar UI Example

Tailwind CSS 3 Login Page UI Example

Tailwind CSS Login Modal Example

Tailwind CSS Search Examples

Tailwind CSS 3 Overlay Image Example

Tailwind CSS Thank You Page Example

Tailwind CSS Timeline UI Example

Tailwind CSS Responsive Footer Section Example

Tailwind CSS Background Image Header Example