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

1.2k

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

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

Author:
Manuela Bianka

2 years ago

10k
Services
explore our awesome Services

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

7 months ago

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

Author:
inbarajan P

3 months ago

365
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
Tailwind FAQ accordion

Author:
yousef

8 months ago

2.6k
Accordion
uses Flobite.js for interactivity

Author:
Piet Vriend

2 years ago

12.3k
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

1 year ago

17.1k
Accordion with minimum javascript

Author:
Anonymous

1 year ago

7.4k
Accordion section

Author:
Lyra Ravensong

1 year ago

13.9k
Native HTML Accordion
native html accordion summary details

Author:
Cristian

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

156
details & summary beautiful styling & animation
details & summary beautiful styling & animation

Author:
Cristian

2 months ago

349

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components