Home
Sophia Baker
Accordion FAQ

Accordion FAQ

FAQ Accordion section without using any javascript

This tailwind example is contributed by Sophia Baker, on 25-Feb-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Frequently asked questions, QnA,collapsible

FAQ Accordion

Author Sophia Baker

14.6k

Fork Fullscreen

<ul class="max-w-2xl mx-auto mt-20 divide-y  shadow shadow-blue-600 rounded-xl">
    <li>
        <details class="group">
            <summary class="flex items-center gap-3 px-4 py-3 font-medium marker:content-none hover:cursor-pointer">
                <svg class="w-5 h-5 text-gray-500 transition group-open:rotate-90" xmlns="http://www.w3.org/2000/svg"
                    width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fill-rule="evenodd"
                        d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z">
                    </path>
                </svg>
                <span>What am I getting as a Premium Member?</span>
            </summary>

<article class="px-4 pb-4">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et ipsum sapien. Vestibulum molestie
                    porttitor augue vitae vulputate. Aliquam nec ex maximus, suscipit diam vel, tristique tellus.
                </p>
            </article>
        </details>
    </li>
    <li>
        <details class="group">
            <summary class="flex items-center gap-3 px-4 py-3 font-medium marker:content-none hover:cursor-pointer">
                <svg class="w-5 h-5 text-gray-500 transition group-open:rotate-90" xmlns="http://www.w3.org/2000/svg"
                    width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fill-rule="evenodd"
                        d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z">
                    </path>
                </svg>
                <span>What am I getting as a Premium Member?</span>
            </summary>

<article class="px-4 pb-4">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et ipsum sapien. Vestibulum molestie
                    porttitor augue vitae vulputate. Aliquam nec ex maximus, suscipit diam vel, tristique tellus. </p>
            </article>
        </details>
    </li>
    <li>
        <details class="group">
            <summary class="flex items-center gap-3 px-4 py-3 font-medium marker:content-none hover:cursor-pointer">
                <svg class="w-5 h-5 text-gray-500 transition group-open:rotate-90" xmlns="http://www.w3.org/2000/svg"
                    width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fill-rule="evenodd"
                        d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z">
                    </path>
                </svg>
                <span>What am I getting as a Premium Member?</span>
            </summary>

</ul>

Related Examples

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

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

Author:
King Kali

8 months ago

8.8k
Accordion section

Author:
Lyra Ravensong

1 year ago

12.6k
Accordion
uses Flobite.js for interactivity

Author:
Piet Vriend

1 year ago

9.9k
FAQ page

Author:
R Thapa

9 months ago

9.6k
Frequently Asked Questions section

Author:
Brandon D

1 year ago

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

7 months ago

6k
Frequently asked questions (FAQ)

Author:
Brandon D

1 year ago

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

Author:
Manuela Bianka

1 year ago

8.8k
FAQ cards
FAQ section with cards

Author:
Moriba Traore

1 year ago

12k
Accordion with minimum javascript

Author:
Anonymous

9 months ago

6.4k
FAQ section

Author:
Brandon D

1 year ago

7.9k
FAQ section

Author:
Simon Scheffer

1 year ago

9.3k
Tailwind FAQ accordion

Author:
yousef

3 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 1400+ componenent