Home
Lyra Ravensong
Accordion section

Accordion section

This tailwind example is contributed by Lyra Ravensong, on 26-Feb-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is collapsible

Accordion

Author Lyra Ravensong

14.9k

Fork Fullscreen

<div class="mx-auto max-w-lg mt-24">
    <div class="divide-y divide-gray-100">
        <details class="group" open>
            <summary
                class="flex cursor-pointer list-none items-center justify-between py-4 text-lg font-medium text-secondary-900 group-open:text-primary-500">
                Accordion item 01
                <div>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="block h-5 w-5 group-open:hidden">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="hidden h-5 w-5 group-open:block">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                    </svg>
                </div>
            </summary>
            <div class="pb-4 text-secondary-500">This is the first item's accordion body.</div>
        </details>
        <details class="group">
            <summary
                class="flex cursor-pointer list-none items-center justify-between py-4 text-lg font-medium text-secondary-900 group-open:text-primary-500">
                Accordion item 02
                <div>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="block h-5 w-5 group-open:hidden">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="hidden h-5 w-5 group-open:block">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                    </svg>
                </div>
            </summary>
            <div class="pb-4 text-secondary-500">This is the second item's accordion body.</div>
        </details>
        <details class="group">
            <summary
                class="flex cursor-pointer list-none items-center justify-between py-4 text-lg font-medium text-secondary-900 group-open:text-primary-500">
                Accordion item 03
                <div>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="block h-5 w-5 group-open:hidden">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="hidden h-5 w-5 group-open:block">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                    </svg>
                </div>
            </summary>
            <div class="pb-4 text-secondary-500">This is the third item's accordion body.</div>
        </details>
    </div>
</div>

Related Examples

Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

19k
Accordion
uses Flobite.js for interactivity

Author:
Piet Vriend

2 years ago

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

Author:
Manuela Bianka

3 years ago

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

15.5k
Accordion with minimum javascript

Author:
Anonymous

2 years ago

8.9k
details & summary beautiful styling & animation
details & summary beautiful styling & animation

Author:
Cristian

1 year ago

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

8 months ago

1.3k
Tailwind FAQ accordion

Author:
yousef

1 year ago

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

Author:
Rajesh Maheshwari

6 months ago

928
portifolio
upgraded portifolio

Author:
Bonimater

2 months ago

363
bonimator dash board
bonimator dash board

Author:
Bonimater

1 month ago

176
Why Everyone Around the World Loves Us
"Our platform is built to serve everyone, everywhere — with speed, security, and a human touch." "From cities to remote villages, our features connect the world through technology that truly cares." "Designed with the whole world in mind — fast, secure, and made for real people." "No matter who you are or where you're from, our tools are built to empower and inspire you." "We believe great technology should be accessible, safe, and helpful to all — and that's exactly what we offer."

Author:
Nicole Shalom

4 months ago

697

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components