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/[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>
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
