Home
Anonymous
Accordion with minimum javascript

Accordion with minimum javascript

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

Accordion

Author Anonymous

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.

Author:
King Kali

2 years ago

15.9k
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

19.4k
Accordion
uses Flobite.js for interactivity

Author:
Piet Vriend

2 years ago

14.7k
Accordion section

Author:
Lyra Ravensong

2 years ago

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

Author:
Manuela Bianka

3 years ago

11.8k
bonimator dash board
bonimator dash board

Author:
Bonimater

3 months ago

195
aportifolio book
aportifolio book

Author:
Bonimater

3 months ago

573
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.

Author:
Indra

2 months ago

224
Accordion block
FAQ accordion component, featuring expandable sections with smooth transitions and a clean, modern design

Author:
Maxim

1 year ago

1.7k
Native HTML Accordion
native html accordion summary details

Author:
Cristian

1 year ago

2.3k
details & summary beautiful styling & animation
details & summary beautiful styling & animation

Author:
Cristian

1 year ago

2k
FAQ.
Super simple animated FAQ with tailwind group hoverable accordion open and close.

Author:
inbarajan P

1 year ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components