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

2 years ago

17.1k
Accordion FAQ
FAQ Accordion section without using any javascript

Sophia Baker

3 years ago

20.5k
Accordion
uses Flobite.js for interactivity

Piet Vriend

3 years ago

16.1k
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
Tailwind FAQ accordion

yousef

2 years ago

6.2k
Native HTML Accordion
native html accordion summary details

Cristian

2 years ago

2.8k
HOT DOGS WEB SITE
it combine the hot dogs delivary

bonheur dev

1 year ago

1.2k
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
Footer with mobile accordion
A modern dark-themed footer component built with Tailwind CSS, featuring a responsive 5-column grid layout for desktop that transforms into an accordion menu on mobile devices. Perfect for beverage, e-commerce, or corporate websites, it includes organized navigation categories, hover effects on links, social media integration, and a clean copyright section - all styled with a professional stone-gray color scheme.

Maxim

1 year ago

2.2k
bonimator dash board
bonimator dash board

Bonimater

1 year ago

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

Sherry Lynne

1 month ago

124