FAQs
The FAQ section offers a way of displaying a question-answer format without overwhelming readers with too much information.
FAQs: accordion style; expand and collapse
<div class="container max-w-2xl py-20 text-gray-900 font-sans lg:py-32">
<h2 class="text-xl font-bold md:text-center md:text-2xl">Frequently Asked Questions</h2>
<ul
x-data="{ ...faq() }"
aria-label="Accordion Control Group Buttons"
x-cloak
class="mt-8 space-y-4"
>
<li class="border">
<h3>
<button
aria-controls="section-1"
x-bind:aria-expanded="isActive('section-1') ? 'true' : 'false'"
x-bind:class="isActiveClasses('section-1')"
class="w-full flex items-center justify-between py-3 px-4 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none focus:ring focus:ring-blue-500"
x-on:click="setActive('section-1')"
>
<span>Commodo Fusce</span>
<span aria-hidden="true" class="ml-2">
<i data-feather="minus" class="w-4 h-4" x-show="isActive('section-1')"></i>
<i data-feather="plus" class="w-4 h-4" x-show="!isActive('section-1')"></i>
</span>
</button>
</h3>
<div
id="section-1"
x-bind:aria-hidden="!isActive('section-1')"
x-show="isActive('section-1')"
x-transition:enter="transition-all duration-200"
x-transition:enter-start="opacity-0 max-h-0 overflow-hidden"
x-transition:enter-end="opacity-100 max-h-screen"
x-transition:leave="transition-all duration-100"
x-transition:leave-start="opacity-100 max-h-screen"
x-transition:leave-end="opacity-0 max-h-0 overflow-hidden"
class="h-full overflow-y-auto"
tabindex="0"
>
<img
class="w-full"
src="https://images.unsplash.com/photo-1541339907198-e08756dedf3f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&h=320&q=60"
alt="Graduates throwing hats in the air"
>
<div class="px-4 py-8">
<h3 class="text-lg font-bold">Fermentum Consectetur</h3>
<p class="text-sm">Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
</div>
</li>
<li class="border">
<h3>
<button
aria-controls="section-2"
x-bind:aria-expanded="isActive('section-2') ? 'true' : 'false'"
x-bind:class="isActiveClasses('section-2')"
class="w-full flex items-center justify-between py-3 px-4 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none focus:ring focus:ring-blue-500"
x-on:click="setActive('section-2')"
>
<span>Tortor Condimentum Dapibus</span>
<span aria-hidden="true" class="ml-2">
<i data-feather="minus" class="w-4 h-4" x-show="isActive('section-2')"></i>
<i data-feather="plus" class="w-4 h-4" x-show="!isActive('section-2')"></i>
</span>
</button>
</h3>
<div
id="section-2"
x-bind:aria-hidden="!isActive('section-2')"
x-show="isActive('section-2')"
x-transition:enter="transition-all duration-200"
x-transition:enter-start="opacity-0 max-h-0 overflow-hidden"
x-transition:enter-end="opacity-100 max-h-screen"
x-transition:leave="transition-all duration-100"
x-transition:leave-start="opacity-100 max-h-screen"
x-transition:leave-end="opacity-0 max-h-0 overflow-hidden"
class="h-full overflow-y-auto"
tabindex="0"
>
<div class="px-4 py-8">
<p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores harum rem ad veniam quam, ea suscipit nulla ratione et aut dolores sequi eos porro at sed atque quisquam, ipsa quo.</p>
</div>
</div>
</li>
<li class="border">
<h3>
<button
aria-controls="section-3"
x-bind:aria-expanded="isActive('section-3') ? 'true' : 'false'"
x-bind:class="isActiveClasses('section-3')"
class="w-full flex items-center justify-between py-3 px-4 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none focus:ring focus:ring-blue-500"
x-on:click="setActive('section-3')"
>
<span>Fermentum Consectetur Parturient Nibh</span>
<span aria-hidden="true" class="ml-2">
<i data-feather="minus" class="w-4 h-4" x-show="isActive('section-3')"></i>
<i data-feather="plus" class="w-4 h-4" x-show="!isActive('section-3')"></i>
</span>
</button>
</h3>
<div
id="section-3"
x-bind:aria-hidden="!isActive('section-3')"
x-show="isActive('section-3')"
x-transition:enter="transition-all duration-200"
x-transition:enter-start="opacity-0 max-h-0 overflow-hidden"
x-transition:enter-end="opacity-100 max-h-screen"
x-transition:leave="transition-all duration-100"
x-transition:leave-start="opacity-100 max-h-screen"
x-transition:leave-end="opacity-0 max-h-0 overflow-hidden"
class="h-full overflow-y-auto"
tabindex="0"
>
<div class="px-4 py-8">
<p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores harum rem ad veniam quam, ea suscipit nulla ratione et aut dolores sequi eos porro at sed atque quisquam, ipsa quo.</p>
<p class="mt-2 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores harum rem ad veniam quam, ea suscipit nulla ratione et aut dolores sequi eos porro at sed atque quisquam, ipsa quo.</p>
</div>
</div>
</li>
</ul>
</div>
<script>
const faq = () => {
return {
active: null,
setActive(section) {
this.active === section ? this.active = null : this.active = section;
},
isActive(section) {
return this.active === section
},
isActiveClasses(section) {
return {
'bg-gray-200': this.isActive(section)
}
},
}
}
</script>
FAQs: side-by-side definition list
<div class="container max-w-4xl py-20 text-gray-900 font-sans lg:py-32">
<dl class="divide-y border-t border-b">
<div class="md:flex md:items-start">
<dt class="p-4 font-bold md:w-2/5 md:py-6">Commodo Fusce</dt>
<dd class="px-4 pb-4 text-sm text-gray-700 md:py-6 md:flex-1">Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </dd>
</div>
<div class="md:flex md:items-start">
<dt class="p-4 font-bold md:w-2/5 md:py-6">Porta Condimentum Nullam</dt>
<dd class="px-4 pb-4 text-sm text-gray-700 md:py-6 md:flex-1">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper.</dd>
</div>
<div class="md:flex md:items-start">
<dt class="p-4 font-bold md:w-2/5 md:py-6">Magna Ridiculus Condimentum Fusce</dt>
<dd class="px-4 pb-4 text-sm text-gray-700 md:py-6 md:flex-1">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.</dd>
</div>
<div class="md:flex md:items-start">
<dt class="p-4 font-bold md:w-2/5 md:py-6">Egestas Fermentum Purus Parturient</dt>
<dd class="px-4 pb-4 text-sm text-gray-700 md:py-6 md:flex-1">Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</dd>
</div>
<div class="md:flex md:items-start">
<dt class="p-4 font-bold md:w-2/5 md:py-6">Condimentum Dapibus Fusce</dt>
<dd class="px-4 pb-4 text-sm text-gray-700 md:py-6 md:flex-1">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</dd>
</div>
</dl>
</div>