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.6k

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
quick and easy access to frequently asked questions related to insurance. It allows users to expand and collapse questions with answers.

Author:
Anonymous

2 years ago

10k
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.

Author:
Abhiraj

10 months ago

1.8k
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

Author:
MD Mostafa Niloy

3 weeks ago

35
FAQ section

Author:
Simon Scheffer

3 years ago

10.9k
FAQ - full size
Full sized FAQ section

Author:
kishan pc

1 year ago

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

Author:
Nirav Patel

1 year ago

2.2k
about video
about kelaplus video

Author:
Omer fils ELENGA

4 months ago

615
Cards Seaction - Services block

Author:
ABDO-SY

8 months ago

1.4k
Help Center
Help Center

Author:
Tanvir Hasan Bappy (Tanvir)

1 year ago

917
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

8 months ago

1.2k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

10 months ago

2k
Tailwind FAQ accordion

Author:
yousef

1 year ago

5.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components