Home
Anonymous
Accordion FAQ

Accordion FAQ

quick and easy access to frequently asked questions related to insurance. It allows users to expand and collapse questions with answers.

This tailwind example is contributed by Anonymous, on 08-Nov-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Frequently asked questions, QnA

FAQ

Author Anonymous

8.6k

Fork Fullscreen

<div class="py-24 px-8 max-w-5xl mx-auto flex flex-col md:flex-row gap-12">
    <div class="flex flex-col text-left basis-1/2">
        <p class="inline-block font-semibold text-primary mb-4">Insurance FAQ</p>
        <p class="sm:text-4xl text-3xl font-extrabold text-base-content">Frequently Asked Questions</p>
    </div>
    <ul class="basis-1/2">
        <li>
            <button class="relative flex gap-2 items-center w-full py-5 text-base font-semibold text-left border-t md:text-lg border-base-content/10" aria-expanded="false" onclick="toggleFAQ(this)">
                <span class="flex-1 text-base-content">How secure is my insurance information?</span>
                <svg class="flex-shrink-0 w-4 h-4 ml-auto fill-current" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                    <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out false"></rect>
                    <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out false"></rect>
                </svg>
            </button>
            <div class="transition-all duration-300 ease-in-out max-h-0 overflow-hidden" style="transition: max-height 0.3s ease-in-out 0s;">
                <div class="pb-5 leading-relaxed">
                    <div class="space-y-2 leading-relaxed">We prioritize the security of your insurance information. We use advanced encryption and strict data protection measures to ensure your data is safe and confidential.</div>
                </div>
            </div>
        </li>
        <li>
            <button class="relative flex gap-2 items-center w-full py-5 text-base font-semibold text-left border-t md:text-lg border-base-content/10" aria-expanded="false" onclick="toggleFAQ(this)">
                <span class="flex-1 text-base-content">How can I customize my insurance coverage?</span>
                <svg class="flex-shrink-0 w-4 h-4 ml-auto fill-current" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                    <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out false"></rect>
                    <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out false"></rect>
                </svg>
            </button>
            <div class="transition-all duration-300 ease-in-out max-h-0 overflow-hidden" style="transition: max-height 0.3s ease-in-out 0s;">
                <div class="pb-5 leading-relaxed">
                    <div class="space-y-2 leading-relaxed">Our insurance plans are customizable. You can tailor your coverage to meet your specific needs and budget.</div>
                </div>
            </div>
        </li>
        <li>
            <button class="relative flex gap-2 items-center w-full py-5 text-base font-semibold text-left border-t md:text-lg border-base-content/10" aria-expanded="false" onclick="toggleFAQ(this)">
                <span class="flex-1 text-base-content">Is there a waiting period for insurance claims?</span>
                <svg class="flex-shrink-0 w-4 h-4 ml-auto fill-current" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                    <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out false"></rect>
                    <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out false"></rect>
                </svg>
            </button>
            <div class="transition-all duration-300 ease-in-out max-h-0 overflow-hidden" style="transition: max-height 0.3s ease-in-out 0s;">
                <div class="pb-5 leading-relaxed">
                    <div class="space-y-2 leading-relaxed">There may be a waiting period for certain insurance claims, depending on the policy terms and conditions. Please refer to your policy documents for details.</div>
                </div>
            </div>
        </li>
    </ul>
</div>

Related Examples

FAQ page

Author:
R Thapa

1 year ago

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

Author:
Abhijit Sen

2 years ago

16.1k
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

14.1k
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

18.1k
FAQ cards
FAQ section with cards

Author:
Moriba Traore

1 year ago

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

Author:
Manuela Bianka

2 years ago

10.7k
FAQ section
Frequently asked questions component

Author:
Bunny

2 years ago

10.1k
Frequently Asked Questions section

Author:
Brandon D

2 years ago

11k
FAQ section

Author:
Brandon D

2 years ago

10k
Frequently asked questions (FAQ)

Author:
Brandon D

2 years ago

11.4k
FAQ section

Author:
Simon Scheffer

2 years ago

10.5k
Tailwind FAQ accordion

Author:
yousef

1 year ago

3.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components