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

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

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
Accordion section

Author:
Lyra Ravensong

3 years ago

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

Author:
Rajesh Maheshwari

1 year ago

1.7k
Accordion with minimum javascript

Author:
Anonymous

2 years ago

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

Author:
Maxim

1 year ago

1.9k
bonimator dash board
bonimator dash board

Author:
Bonimater

7 months ago

537
HOT DOGS WEB SITE
it combine the hot dogs delivary

Author:
bonheur dev

9 months ago

719
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

10 months ago

995
Modern Neon Gradient with Diagonal Script
(Purple/Blue/Pink Color Scheme)

Author:
KULDEEP

9 months ago

1.3k
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
The Accordion is a responsive and reusable component designed to display collapsible content sections. It's perfect for FAQs, menu items, or any other grouped information. Each section can expand or collapse individually to show or hide content. Features: Mobile-friendly and fully responsive design. Smooth animation for opening and closing panels. Supports multiple or single panel expansion. Highly customizable with props for colors, fonts, and behavior (e.g., single/multiple open panels). Accessible with keyboard navigation and ARIA attributes.

Author:
Abhiraj

1 year ago

2k
Services
explore our awesome Services

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

1 year ago

2.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components