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

9.2k

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

16.5k
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

3 years ago

19.8k
Accordion
uses Flobite.js for interactivity

Author:
Piet Vriend

3 years ago

15.4k
Accordion section

Author:
Lyra Ravensong

3 years ago

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

Author:
Manuela Bianka

3 years ago

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

10 months ago

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

Author:
bonheur dev

9 months ago

719
portifolio
upgraded portifolio

Author:
Bonimater

8 months ago

779
aportifolio book
aportifolio book

Author:
Bonimater

7 months ago

743
Services
explore our awesome Services

Author:
ابراهيم سيد

1 year ago

2.8k
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.

Author:
Maxim

1 year ago

1.5k
Simple Accordion with Alpine Js and Tailwind CSS

Author:
Anonymous

1 year ago

2.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components