Home
Anonymous
Simple Accordion with Alpine Js and Tailwind CSS

Simple Accordion with Alpine Js and Tailwind CSS

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

Accordion

Author Anonymous

2.8k

Fork Fullscreen

<li class="relative border-b border-gray-200">
                <button type="button" class="w-full px-8 py-6 text-left" @click="selected !== 1 ? selected = 1 : selected = null">
                    <div class="flex items-center justify-between">
                        <span class="text-lg font-medium text-gray-900">
                            Accordion Item 1
                        </span>
                        <span class="ico-plus"></span>
                    </div>
                </button>
                <div class="relative overflow-hidden transition-all max-h-0 duration-700" style="" x-ref="container1"
                    x-bind:style="selected == 1 ? 'max-height: ' + $refs.container1.scrollHeight + 'px' : ''">
                    <div class="p-6">
                        <p class="text-gray-700">Content for accordion item 1 goes here. You can add any HTML content.
                        </p>
                    </div>
                </div>
            </li>

<li class="relative border-b border-gray-200">
                <button type="button" class="w-full px-8 py-6 text-left" @click="selected !== 2 ? selected = 2 : selected = null">
                    <div class="flex items-center justify-between">
                        <span class="text-lg font-medium text-gray-900">
                            Accordion Item 2
                        </span>
                        <span class="ico-plus"></span>
                    </div>
                </button>
                <div class="relative overflow-hidden transition-all max-h-0 duration-700" style="" x-ref="container2"
                    x-bind:style="selected == 2 ? 'max-height: ' + $refs.container2.scrollHeight + 'px' : ''">
                    <div class="p-6">
                        <p class="text-gray-700">Content for accordion item 2 goes here. You can add any HTML content.
                        </p>
                    </div>
                </div>
            </li>

<li class="relative">
                <button type="button" class="w-full px-8 py-6 text-left" @click="selected !== 3 ? selected = 3 : selected = null">
                    <div class="flex items-center justify-between">
                        <span class="text-lg font-medium text-gray-900">
                            Accordion Item 3
                        </span>
                        <span class="ico-plus"></span>
                    </div>
                </button>
                <div class="relative overflow-hidden transition-all max-h-0 duration-700" style="" x-ref="container3"
                    x-bind:style="selected == 3 ? 'max-height: ' + $refs.container3.scrollHeight + 'px' : ''">
                    <div class="p-6">
                        <p class="text-gray-700">Content for accordion item 3 goes here. You can add any HTML content.
                        </p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

Related Examples

Frequently Asked Questions
A beautiful and modern accordion FAQ component using HTML & Tailwind CSS with smooth animations.

Author:
Rajesh Maheshwari

11 months ago

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

Author:
Maxim

1 year ago

1.8k
Services
explore our awesome Services

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

1 year ago

2.8k
Stylish Mobile-First Navigation Bar Using Tailwind
This project showcases a sleek, fixed-top responsive navigation bar crafted with Tailwind CSS. Featuring a vibrant gradient background, a bold uppercase logo, and smooth pink hover effects, it adapts beautifully across devices. On desktop, the navigation links appear horizontally with ample spacing, while on mobile, a hamburger menu toggles a stylish dropdown with rounded corners and subtle shadows. The navbar’s semi-transparent backdrop with blur adds a modern glassmorphism touch, making it perfect for contemporary web designs.

Author:
Bonimater

8 months ago

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

Author:
Manuela Bianka

3 years ago

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

Author:
bonheur dev

8 months ago

569
Accordion FAQ

Author:
Nikola Małecka

1 year ago

1.2k
aportifolio book
aportifolio book

Author:
Bonimater

6 months ago

740
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

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

Author:
inbarajan P

1 year ago

2.2k
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.4k
Accordion with minimum javascript

Author:
Anonymous

2 years ago

9.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components