Accordion FAQ's Page - Tailwind Component
An FAQ (Frequently Asked Questions) page is a key part of a knowledge base because it addresses the most common questions customers have and is useful to customers at all stages of the customer journey, it is use Tailwind CSS to create this beautiful accordion tailwind component.
accordion
Loading component...
157 lines
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="h-screen grid place-items-center">
<div class="max-w-full mx-2 sm:mx-8 border">
<div class="bg-white p-5 sm:p-10 shadow-sm rounded-xl">
<div class="">
<h1 class="font-extrabold text-gray-800 text-2xl ml-5">FAQ's</h1>
<div class="h-1 bg-red-500 rounded-full w-1/6">
</div>
</div>
<div class="mt-14 ml-4 sm:ml-24">
<div class="transition">
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
<i class="fas fa-plus text-red-700"></i>
<h2 class="text-gray-700 font-semibold">How can I for my appointment?</h2>
</div>
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0 space-y-4 mr-4 text-sm">
<div class="flex flex-row ml-8 py-4">
<div class="flex w-1 bg-gradient-to-t from-red-500 to-red-400"></div>
<div class="flex-1 p-3">
<p class="pl-2 sm:pl-4 text-justify">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident, tenetur nemo corrupti porro unde
consectetur officia. Eos, qui quia, voluptates enim, debitis consequatur quis repellat nisi hic cumque
autem molestiae harum nulla rem ducimus laborum ipsam sunt quasi omnis. Architecto?
</p>
</div>
</div>
</div>
</div>
<div class="transition">
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
<i class="fas fa-plus text-red-700"></i>
<h2 class="text-gray-700 font-semibold">What can I expect at my first consultation?</h2>
</div>
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0 space-y-4 mr-4 text-sm">
<div class="flex flex-row ml-8 py-4">
<div class="flex w-1 bg-gradient-to-t from-red-500 to-red-400"></div>
<div class="flex-1 p-3">
<p class="pl-2 sm:pl-4 text-justify">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident, tenetur nemo corrupti porro unde
consectetur officia. Eos, qui quia, voluptates enim, debitis consequatur quis repellat nisi hic cumque
autem molestiae harum nulla rem ducimus laborum ipsam sunt quasi omnis. Architecto?
</p>
</div>
</div>
</div>
</div>
<div class="transition">
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
<i class="fas fa-plus text-red-700"></i>
<h2 class="text-gray-700 font-semibold">What are you opening hours?</h2>
</div>
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0 space-y-4 mr-4 text-sm">
<div class="flex flex-row ml-8 py-4">
<div class="flex w-1 bg-gradient-to-t from-red-500 to-red-400"></div>
<div class="flex-1 p-3">
<p class="pl-2 sm:pl-4 text-justify">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident, tenetur nemo corrupti porro unde
consectetur officia. Eos, qui quia, voluptates enim, debitis consequatur quis repellat nisi hic cumque
autem molestiae harum nulla rem ducimus laborum ipsam sunt quasi omnis. Architecto?
</p>
</div>
</div>
</div>
</div>
<div class="transition">
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
<i class="fas fa-plus text-red-700"></i>
<h2 class="text-gray-700 font-semibold">Do I need a referral?</h2>
</div>
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0 space-y-4 mr-4 text-sm">
<div class="flex flex-row ml-8 py-4">
<div class="flex w-1 bg-gradient-to-t from-red-500 to-red-400"></div>
<div class="flex-1 p-3">
<p class="pl-2 sm:pl-4 text-justify">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident, tenetur nemo corrupti porro unde
consectetur officia. Eos, qui quia, voluptates enim, debitis consequatur quis repellat nisi hic cumque
autem molestiae harum nulla rem ducimus laborum ipsam sunt quasi omnis. Architecto?
</p>
</div>
</div>
</div>
</div>
<div class="transition">
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
<i class="fas fa-plus text-red-700"></i>
<h2 class="text-gray-700 font-semibold">What is your cancellation policy?</h2>
</div>
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0 space-y-4 mr-4 text-sm">
<div class="flex flex-row ml-8 py-4">
<div class="flex w-1 bg-gradient-to-t from-red-500 to-red-400"></div>
<div class="flex-1 p-3">
<p class="pl-2 sm:pl-4 text-justify">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident, tenetur nemo corrupti porro unde
consectetur officia. Eos, qui quia, voluptates enim, debitis consequatur quis repellat nisi hic cumque
autem molestiae harum nulla rem ducimus laborum ipsam sunt quasi omnis. Architecto?
</p>
</div>
</div>
</div>
</div>
<div class="transition">
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
<i class="fas fa-plus text-red-700"></i>
<h2 class="text-gray-700 font-semibold">What are the parking and public transport options?</h2>
</div>
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0 space-y-4 mr-4 text-sm">
<div class="flex flex-row ml-8 py-4">
<div class="flex w-1 bg-gradient-to-t from-red-500 to-red-400"></div>
<div class="flex-1 p-3">
<p class="pl-2 sm:pl-4 text-justify">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident, tenetur nemo corrupti porro unde
consectetur officia. Eos, qui quia, voluptates enim, debitis consequatur quis repellat nisi hic cumque
autem molestiae harum nulla rem ducimus laborum ipsam sunt quasi omnis. Architecto?
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
body {
font-family: 'Poppins', sans-serif;
}
.accordion-content {
transition: max-height 0.3s ease-out, padding 0.3s ease;
}
</style>
<script>
const accordionHeader = document.querySelectorAll(".accordion-header");
accordionHeader.forEach((header) => {
header.addEventListener("click", function () {
const accordionContent = header.parentElement.querySelector(".accordion-content");
let accordionMaxHeight = accordionContent.style.maxHeight;
if (accordionMaxHeight == "0px" || accordionMaxHeight.length == 0) {
accordionContent.style.maxHeight = `${accordionContent.scrollHeight + 32}px`;
header.querySelector(".fas").classList.remove("fa-plus");
header.querySelector(".fas").classList.add("fa-minus");
} else {
accordionContent.style.maxHeight = `0px`;
header.querySelector(".fas").classList.add("fa-plus");
header.querySelector(".fas").classList.remove("fa-minus");
}
});
});
</script>