Tailwind CSS Accordions (Bootstrap Plugins)

Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.

Example

Design
HTML

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam iure natus perspiciatis laudantium nisi, esse tenetur aperiam nobis modi, ad est blanditiis accusamus molestias enim! Neque.

Accordion Item #2

Impedit repudiandae ad itaque doloremque fugit veritatis? Laudantium reiciendis dolorum rem recusandae aperiam tempora qui culpa quia, et, adipisci laborum debitis illo quo fugiat sed harum vel neque exercitationem autem accusamus. Rerum minima unde dolores enim.

Accordion Item #3

			<div class="accordion accordion-flush" id="accordionFlushExample">
<!-- accordion item -->
	<div class="border-b border-gray-300 py-4">
		<div class="flex justify-between items-center">
			<!-- heading one -->
			<a
				href="#"
				class="flex flex-row gap-2 items-center justify-between w-full text-gray-800 text-md font-semibold collapsed"
				data-bs-toggle="collapse"
				data-bs-target="#flush-collapseOne"
				aria-expanded="true"
				aria-controls="flush-collapseOne"
			>
				<span>Accordion Item #1</span>
				<span>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						width="24"
						height="24"
						viewBox="0 0 24 24"
						fill="none"
						stroke="currentColor"
						stroke-width="2"
						stroke-linecap="round"
						stroke-linejoin="round"
						class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"
					>
						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
						<path d="M6 9l6 6l6 -6" />
					</svg>
				</span>
			</a>
			<!-- collapse -->
		</div>
		<div id="flush-collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionFlushExample">
			<div class="mt-4">
				<p>
					Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam iure natus perspiciatis laudantium nisi, esse tenetur aperiam nobis modi, ad est blanditiis accusamus
					molestias enim! Neque.
				</p>
			</div>
		</div>
	</div>
	<div class="border-b border-gray-300 py-4">
		<div class="flex justify-between items-center">
			<!-- heading one -->
			<a
				href="#"
				class="flex flex-row gap-2 items-center justify-between w-full text-gray-800 text-md font-semibold collapsed"
				data-bs-toggle="collapse"
				data-bs-target="#flush-collapseTwo"
				aria-expanded="false"
				aria-controls="flush-collapseTwo"
			>
				<span>Accordion Item #2</span>
				<span>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						width="24"
						height="24"
						viewBox="0 0 24 24"
						fill="none"
						stroke="currentColor"
						stroke-width="2"
						stroke-linecap="round"
						stroke-linejoin="round"
						class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"
					>
						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
						<path d="M6 9l6 6l6 -6" />
					</svg>
				</span>
			</a>
			<!-- collapse -->
		</div>
		<div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
			<div class="mt-4">
				<p>
					Impedit repudiandae ad itaque doloremque fugit veritatis? Laudantium reiciendis dolorum rem recusandae aperiam tempora qui culpa quia, et, adipisci laborum debitis
					illo quo fugiat sed harum vel neque exercitationem autem accusamus. Rerum minima unde dolores enim.
				</p>
			</div>
		</div>
	</div>
	<div class="border-b border-gray-300 py-4">
		<div class="flex justify-between items-center">
			<!-- heading one -->
			<a
				href="#"
				class="flex flex-row gap-2 items-center justify-between w-full text-gray-800 text-md font-semibold collapsed"
				data-bs-toggle="collapse"
				data-bs-target="#flush-collapseThree"
				aria-expanded="false"
				aria-controls="flush-collapseThree"
			>
				<span>Accordion Item #3</span>
				<span>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						width="24"
						height="24"
						viewBox="0 0 24 24"
						fill="none"
						stroke="currentColor"
						stroke-width="2"
						stroke-linecap="round"
						stroke-linejoin="round"
						class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"
					>
						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
						<path d="M6 9l6 6l6 -6" />
					</svg>
				</span>
			</a>
			<!-- collapse -->
		</div>
		<div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
			<div class="mt-4">
				<p>
					Impedit repudiandae ad itaque doloremque fugit veritatis? Laudantium reiciendis dolorum rem recusandae aperiam tempora qui culpa quia, et, adipisci laborum debitis
					illo quo fugiat sed harum vel neque exercitationem autem accusamus. Rerum minima unde dolores enim.
				</p>
			</div>
		</div>
	</div>
</div>