Accordion with minimum javascript

This tailwind example is contributed by Anonymous, on 16-Sep-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is collapsible

Accordion

Author Anonymous

Tailwind v3.4 9.5k 11

Fork Fullscreen

<div class="max-w-md mx-auto mt-24">
        
        <div class="overflow-hidden shadow-md bg-white">
            <div class="bg-gray-100 p-4 cursor-pointer flex justify-between items-center" onclick="toggleAccordion(1)">
                <h3 class="font-semibold text-lg">Accordion Item 1</h3>
                <span class="transform transition-transform" id="arrow-icon-1">▼</span>
            </div>
            <div class="p-4 hidden" id="accordion-content-1">
                
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>

<div class="overflow-hidden shadow-md bg-white">
            <div class="bg-gray-100 p-4 cursor-pointer flex justify-between items-center" onclick="toggleAccordion(2)">
                <h3 class="font-semibold text-lg">Accordion Item 2</h3>
                <span class="transform transition-transform" id="arrow-icon-2">▼</span>
            </div>
            <div class="p-4 hidden" id="accordion-content-2">
                
                <p>Nulla facilisi. Suspendisse potenti. Vestibulum nec velit nec urna tincidunt vehicula.</p>
            </div>
        </div>

<div class="overflow-hidden shadow-md bg-white">
            <div class="bg-gray-100 p-4 cursor-pointer flex justify-between items-center" onclick="toggleAccordion(3)">
                <h3 class="font-semibold text-lg">Accordion Item 3</h3>
                <span class="transform transition-transform" id="arrow-icon-3">▼</span>
            </div>
            <div class="p-4 hidden" id="accordion-content-3">
                
                <p>Vestibulum ullamcorper, justo nec tincidunt feugiat, tortor justo eleifend nulla.</p>
            </div>
        </div>
</div>

Related Examples

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

King Kali

3 years ago

17.2k
Accordion FAQ
FAQ Accordion section without using any javascript

Sophia Baker

3 years ago

20.7k
Accordion
uses Flobite.js for interactivity

Piet Vriend

3 years ago

16.2k
Accordion section

Lyra Ravensong

3 years ago

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

Manuela Bianka

4 years ago

12.3k
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
Accordion block
FAQ accordion component, featuring expandable sections with smooth transitions and a clean, modern design

Maxim

1 year ago

2.9k
Accordion FAQ
FAQ Accordion section without using any javascript

Ganesh Salunke

6 months ago

306
Accordion FAQ

Nikola Małecka

1 year ago

2k
Accordions & FAQs with css chevrons: No javascript needed
Chevron toggle without using nested SVG images.

Sherry Lynne

3 months ago

199
Expandable File Tree with Tailwind and Vanilla JS with tailwinds 4
A simple and responsive file tree component built with Tailwind CSS and vanilla JavaScript. Each folder can be expanded or collapsed with smooth transitions, including the root directory. This component is useful for project explorers, code editors, or file management UIs.

Indra

1 year ago

1.3k
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."

Nicole Shalom

1 year ago

1.8k