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 5

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

Attractive Feature Section
With Gradient Color 6 Features

KULDEEP

1 year ago

1.4k
FAQ page

R Thapa

3 years ago

16.2k
Pricing component luxuries
A modern, luxurious, and elegant pricing component with HTML and Tailwind CSS.

Alif Bima Pradana

8 months ago

911
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

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

Abhijit Sen

3 years ago

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

Rajesh Maheshwari

1 year ago

2.2k
FAQ section

Brandon D

3 years ago

11.4k
FAQ section
Frequently asked questions component

Bunny

3 years ago

11.9k
faq ui simple
faq ui simple

Omer fils ELENGA

7 months ago

450
Home
html , css

Hacker Development

1 year ago

1.5k
Accordion
The Accordion is a responsive and reusable component designed to display collapsible content sections. It's perfect for FAQs, menu items, or any other grouped information. Each section can expand or collapse individually to show or hide content. Features: Mobile-friendly and fully responsive design. Smooth animation for opening and closing panels. Supports multiple or single panel expansion. Highly customizable with props for colors, fonts, and behavior (e.g., single/multiple open panels). Accessible with keyboard navigation and ARIA attributes.

Abhiraj

1 year ago

2.7k
Cards Seaction - Services block

ABDO-SY

1 year ago

2.4k