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

7.4k

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

1 year ago

12.4k
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

1 year ago

17.1k
Accordion
uses Flobite.js for interactivity

Author:
Piet Vriend

2 years ago

12.2k
Accordion section

Author:
Lyra Ravensong

1 year ago

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

Author:
Manuela Bianka

2 years ago

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

Author:
inbarajan P

3 months ago

358
Native HTML Accordion
native html accordion summary details

Author:
Cristian

7 months ago

1.1k
Tailwind FAQ accordion

Author:
yousef

8 months ago

2.6k
Simple Accordion with Alpine Js and Tailwind CSS

Author:
Anonymous

4 months ago

1.1k
Services
explore our awesome Services

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

7 months ago

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

Author:
Maxim

1 month ago

154
details & summary beautiful styling & animation
details & summary beautiful styling & animation

Author:
Cristian

2 months ago

264

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components