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/tailwindcss@^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.
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/tailwindcss@^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.
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/tailwindcss@^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
Read Also
Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Alert Message Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
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 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
