Home
Orson Kincaid
Simple expanded FAQ example

Simple expanded FAQ example

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

FAQ

Author Orson Kincaid

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

Frequently Asked Questions section

Author:
Brandon D

1 year ago

9.5k
FAQ Accordion Component
An interactive experience where users can click on questions to reveal or hide the corresponding answers.

Author:
King Kali

1 year ago

11.2k
FAQ section

Author:
Simon Scheffer

1 year ago

9.7k
FAQ with dropdown with Dark mode
Added dark mode and improved UI and Code quality

Author:
Dika Rahman

1 week ago

178
for qution and answer
this is i made for qution and ans and referense from etsnote.com

Author:
Nirav Patel

6 months ago

788
FAQ with Search

Author:
Dpk Mht

3 months ago

553
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

1 year ago

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

Author:
Abhijit Sen

1 year ago

13.8k
FAQ cards
FAQ section with cards

Author:
Moriba Traore

1 year ago

12.5k
FAQ section

Author:
Brandon D

1 year ago

8.3k
FAQ section
An expanding frequently asked questions section made without using javascript.

Author:
Manuela Bianka

2 years ago

9.5k
FAQ section
Frequently asked questions component

Author:
Bunny

1 year ago

9.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent