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>



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>



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>