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

Heroicons Icons

Alpine Js 3.x


Setup Project

Using CDN

<link href="https://unpkg.com/[email protected]^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>



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>