Create Accordion (FAQ) Alpine js With Tailwind CSS

In this tutorial we will see Accordion (FAQ) examples with apine js .

Tool Use

Tailwind CSS 2.x / 3.x

Heroicons Icons

Alpine Js 3.x

Setup Project

Using CDN

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

or

The Easiest way to install Tailwind CSS with Tailwind CLI

Using Apline Js 3.x CDN

<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

Create Accordion (FAQ) UI

<div class="flex justify-center mt-16">
            <div>
                <div class="px-20 py-12 space-y-4 bg-gray-100 shadow-xl">
                    <h3 class="text-2xl font-bold">Accordion</h3>
                    <div class="flex justify-between p-2 bg-white divide-x-2">
                        FAQ One
                        <span><svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg></span>
                    </div>
                    <div class="p-2 border-l-4 border-black border-red-400 bg-green-50">
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.lorem </p>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.lorem </p>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.lorem </p>
                    </div>
                    <div class="flex justify-between p-2 bg-white">
                        FAQ Two, quia temporibus eveniet a libero incidunt suscipit
                        <span><svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg></span>
                    </div>
                    <div class="p-2 border-l-4 border-black border-red-400 bg-green-50">
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.lorem </p>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.lorem </p>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.lorem </p>
                    </div>
                    <div class="flex justify-between p-2 bg-white">
                        FAQ Three, quia temporibus eveniet a libero incidunt suscipit
                        <span><svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg></span>
                    </div>
                    <div class="p-2 border-l-4 border-black border-red-400 bg-green-50">
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.lorem </p>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.lorem </p>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.lorem </p>
                    </div>
                </div>
            </div>
        </div>

alpinejs faq v1

Add Alpine Js Accordion (FAQ)

<div class="flex justify-center mt-16">
            <div x-data="{faqOne: false, faqTwo:false, faqThree:false}">
                <div class="px-20 py-12 space-y-4 bg-gray-100 shadow-xl">
                    <h3 class="text-2xl font-bold">Accordion</h3>
                    <div @click="faqOne = ! faqOne" class="flex justify-between p-2 bg-white divide-x-2">
                        FAQ One
                        <span><svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg></span>
                    </div>
                    <div x-show="faqOne" class="p-2 border-l-4 border-black border-red-400 bg-green-50">
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.lorem </p>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.lorem </p>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.lorem </p>
                    </div>
                    <div @click="faqTwo = ! faqTwo" class="flex justify-between p-2 bg-white">
                        FAQ Two, quia temporibus eveniet a libero incidunt suscipit
                        <span><svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg></span>
                    </div>
                    <div x-show="faqTwo" class="p-2 border-l-4 border-black border-red-400 bg-green-50">
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.lorem </p>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.lorem </p>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.lorem </p>
                    </div>
                    <div @click="faqThree = ! faqThree" class="flex justify-between p-2 bg-white">
                        FAQ Three, quia temporibus eveniet a libero incidunt suscipit
                        <span><svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg></span>
                    </div>
                    <div x-show="faqThree" class="p-2 border-l-4 border-black border-red-400 bg-green-50">
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.lorem </p>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.lorem </p>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.lorem </p>
                    </div>
                    <!-- <div class="p-2 bg-white">Quidem, ipsam illum quis sed voluptatum quae eum fugit earum</div> -->
                </div>
            </div>
        </div>

alpinejs faq v2