FAQ with Show More Button with Hide Button Using Tailwind UI
A FAQ section with a ‘show more’ button and a ‘hide’ button, created with Tailwind, optimizes user interaction by allowing them to expand and collapse information effortlessly, improving readability and user engagement.
faqs
Loading component...
124 lines
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet"
/>
<style>
.body {
font-family: "Plus Jakarta Sans", sans-serif;
}
</style>
<section class="dark:bg-gray-800 dark:text-gray-100">
<div
class="container flex flex-col justify-center w-full px-4 py-8 mx-auto sm:max-w-4xl md:p-8"
>
<div class="mb-12">
<h2 class="mb-4 text-2xl font-bold text-center leadi sm:text-3xl">
Frequently Asked Questions
</h2>
<p class="text-center">
Can’t find the answer you’re looking for? Reach out to our customer
support team.
</p>
</div>
<div class="divide-y divide-gray-700">
<div class="py-6 space-y-2">
<h3 class="text-lg font-semibold">How do you make holy water?</h3>
<p class="md:pl-0 md:col-span-7">
You boil the hell out of it. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quas cupiditate laboriosam fugiat.
</p>
</div>
<div class="py-6 space-y-2">
<h3 class="text-lg font-semibold">
What's the best thing about Switzerland?
</h3>
<p class="md:pl-0 md:col-span-7">
I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
</p>
<button
id="toggle-btn"
class="flex items-center mt-4 text-blue-500 focus:outline-none"
>
Read More
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-4 h-4 ml-2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
/>
</svg>
</button>
</div>
<div class="hidden divide-y divide-gray-700" id="more-text">
<div class="py-6 space-y-2">
<h3 class="text-lg font-semibold">
What do you call someone with no body and no nose?
</h3>
<p class="md:pl-0 md:col-span-7">
Nobody knows. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quas cupiditate laboriosam fugiat.
</p>
</div>
<div class="py-6 space-y-2">
<h3 class="text-lg font-semibold">
Why do you never see elephants hiding in trees?
</h3>
<p class="md:pl-0 md:col-span-7">
Because they're so good at it. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
</p>
</div>
</div>
</div>
<button
id="hide-btn"
class="flex items-center hidden mr-auto text-blue-500 focus:outline-none"
>
Hide
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-4 h-4 ml-2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M4.5 15.75l7.5-7.5 7.5 7.5"
/>
</svg>
</button>
</div>
</section>
<script>
const moreTextEl = document.getElementById("more-text")
const toggleBtnEl = document.getElementById("toggle-btn")
const hideBtnEl = document.getElementById("hide-btn")
toggleBtnEl.addEventListener("click", () => {
moreTextEl.classList.toggle("hidden")
toggleBtnEl.classList.toggle("hidden")
hideBtnEl.classList.toggle("hidden")
})
hideBtnEl.addEventListener("click", () => {
moreTextEl.classList.toggle("hidden")
toggleBtnEl.classList.toggle("hidden")
hideBtnEl.classList.toggle("hidden")
})
</script>