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

1.1k

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

Home
html , css

Author:
Hacker Development

1 month ago

44
FAQ section

Author:
Simon Scheffer

2 years ago

10.6k
FAQ - Htmlwind
Offset intro faq section

Author:
Htmlwind

3 weeks ago

37
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

2 months ago

525
FAQ.
Super simple animated FAQ with tailwind group hoverable accordion open and close.

Author:
inbarajan P

9 months ago

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

Author:
Dika Rahman

8 months ago

1.1k
FAQ with Search

Author:
Dpk Mht

1 year ago

1.9k
Tailwind FAQ accordion

Author:
yousef

1 year ago

4.4k
Frequently Asked Questions
A beautiful and modern accordion FAQ component using HTML & Tailwind CSS with smooth animations.

Author:
Rajesh Maheshwari

3 months ago

620
Help Center
Help Center

Author:
Tanvir Hasan Bappy (Tanvir)

6 months ago

717
FAQ cards
FAQ section with cards

Author:
Moriba Traore

2 years ago

13.7k
FAQ Section

Author:
Abdul Baset Bappy

4 days ago

10

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components