Simple expanded FAQ example

This tailwind example is contributed by Orson Kincaid, on 03-Oct-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Frequently asked questions, QnA

FAQ

Author Orson Kincaid

Tailwind v3.4 2.1k 4

Fork Fullscreen

<section class="mt-16 max-w-xl mx-auto px-2">
    <h2 class="text-3xl font-bold text-center text-gray-900">Frequently Asked Questions</h2>
    <dl class="mt-6 space-y-6 divide-y divide-gray-200">
        <div class="pt-6">
            <dt class="text-lg">
                <button type="button" class="flex items-start justify-between w-full text-left text-gray-400"
                    aria-controls="faq-0" aria-expanded="false">
                    <span class="font-medium text-gray-900">Does my storage plan expire?</span>
                    <span class="flex items-center ml-6 h-7">
                        <svg class="w-6 h-6 transform rotate-0" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M19 9l-7 7-7-7" />
                        </svg>
                    </span>
                </button>
            </dt>
            <dd class="pr-12 mt-2" id="faq-0">
                <p class="text-base text-gray-500">
                    <strong>No.</strong> Once subscribed, your storage plan will remain active indefinitely, unless you
                    choose to cancel it.
                </p>
            </dd>
        </div>

<div class="pt-6">
            <dt class="text-lg">
                <button type="button" class="flex items-start justify-between w-full text-left text-gray-400"
                    aria-controls="faq-1" aria-expanded="false">
                    <span class="font-medium text-gray-900">How can I upgrade my storage plan?</span>
                    <span class="flex items-center ml-6 h-7">
                        <svg class="w-6 h-6 transform rotate-0" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M19 9l-7 7-7-7" />
                        </svg>
                    </span>
                </button>
            </dt>
            <dd class="pr-12 mt-2" id="faq-1">
                <p class="text-base text-gray-500">
                    You can upgrade your storage plan by logging into your account and selecting the desired plan from
                    the dashboard.
                </p>
            </dd>
        </div>

<div class="pt-6">
            <dt class="text-lg">
                <button type="button" class="flex items-start justify-between w-full text-left text-gray-400"
                    aria-controls="faq-2" aria-expanded="false">
                    <span class="font-medium text-gray-900">Can I share my storage with others?</span>
                    <span class="flex items-center ml-6 h-7">
                        <svg class="w-6 h-6 transform rotate-0" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M19 9l-7 7-7-7" />
                        </svg>
                    </span>
                </button>
            </dt>
            <dd class="pr-12 mt-2" id="faq-2">
                <p class="text-base text-gray-500">
                    Yes, you can easily share folders with other users by sending them an invitation via email.
                </p>
            </dd>
        </div>

<div class="pt-6">
            <dt class="text-lg">
                <button type="button" class="flex items-start justify-between w-full text-left text-gray-400"
                    aria-controls="faq-3" aria-expanded="false">
                    <span class="font-medium text-gray-900">Do you offer a free trial?</span>
                    <span class="flex items-center ml-6 h-7">
                        <svg class="w-6 h-6 transform rotate-0" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M19 9l-7 7-7-7" />
                        </svg>
                    </span>
                </button>
            </dt>
            <dd class="pr-12 mt-2" id="faq-3">
                <p class="text-base text-gray-500">
                    <strong>Yes!</strong> You can sign up for a free 14-day trial <a
                        href="https://cloudstoragesolutions.com/trial"
                        class="text-indigo-600 hover:text-indigo-500">here</a>.
                </p>
            </dd>
        </div>
    </dl>
</section>
<script>
    // Simple toggle for FAQ
    document.querySelectorAll('dt button').forEach(button => {
        button.addEventListener('click', () => {
            const expanded = button.getAttribute('aria-expanded') === 'true' || false;
            button.setAttribute('aria-expanded', !expanded);
            button.querySelector('svg').classList.toggle('rotate-180');
            const content = button.parentElement.nextElementSibling;
            content.classList.toggle('hidden');
        });
    });
</script>

Related Examples

Accordion FAQ
FAQ Accordion section without using any javascript

Sophia Baker

3 years ago

20.5k
FAQ with Tailwind CSS and Alpine.js

ariaw

1 year ago

1.6k
Accordion FAQ

Nikola Małecka

1 year ago

1.9k
CTA Responsive
Gradient Style CTA

KULDEEP

1 year ago

936
Help Center
Help Center

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.3k
FAQ section

Simon Scheffer

3 years ago

11.5k
FAQ with dropdown
Created by Surjith S M -> https://twitter.com/surjithctly This component does not use javascript for dropdown

Kevin

11 months ago

476
faq ui simple
faq ui simple

Omer fils ELENGA

6 months ago

450
Acode master
Acode master(=>good work for Acode master)

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.6k
FAQs
Frequently Asked Questions

ORGIN_DREAMS

1 year ago

1.3k
FAQ Section with AlpineJS

Maxim

1 year ago

2k
Attractive Feature Section
With Gradient Color 6 Features

KULDEEP

1 year ago

1.4k