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

892

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

Native HTML Accordion
native html accordion summary details

Author:
Cristian

5 months ago

744
Accordion section

Author:
Lyra Ravensong

1 year ago

13.6k
Accordion with minimum javascript

Author:
Anonymous

1 year ago

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

11.5k
details & summary beautiful styling & animation
details & summary beautiful styling & animation

Author:
Cristian

1 month ago

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

Author:
inbarajan P

1 month ago

183
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

1 year ago

16.5k
Tailwind FAQ accordion

Author:
yousef

6 months ago

2.2k
Services
explore our awesome Services

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

5 months ago

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

Author:
Manuela Bianka

2 years ago

9.5k
Accordion
uses Flobite.js for interactivity

Author:
Piet Vriend

1 year ago

11.5k
Animated Button
on hover show icon

Author:
Lautaro Gómez

2 months ago

436

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent