No notes defined.
<!-- https://scrimba.com/p/pdqbBcM/cLpn8pCR -->
<div class="container mx-auto px-2 py-2" x-data="{
faqs: [
{
question: 'Why do I need Alpine JS?',
answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores iure quas laudantium dicta impedit, est id delectus molestiae deleniti enim nobis rem et nihil.',
isOpen: false,
},
{
question: 'Why am I so awesome?',
answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi cumque, nulla harum aspernatur veniam ullam provident neque temporibus autem itaque odit.',
isOpen: false,
},
{
question: 'Why learn on Scrimba?',
answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi cumque, nulla harum aspernatur veniam ullam provident neque temporibus autem itaque odit.',
isOpen: false,
},
]
}">
<h2 class="text-2xl font-bold">FAQs</h2>
<div class="leading-loose text-lg mt-6">
<template x-for="faq in faqs" :key="faq.question">
<div>
<button class="w-full font-bold border-b border-gray-400 py-3 flex justify-between items-center mt-4" @click="faq.isOpen = !faq.isOpen">
<div x-text="faq.question"></div>
<svg x-show="!faq.isOpen" class="w-8 h-8 fill-current" viewBox="0 0 24 24">
<path d="M12 22a10 10 0 110-20 10 10 0 010 20zm0-2a8 8 0 100-16 8 8 0 000 16zm1-9h2a1 1 0 010 2h-2v2a1 1 0 01-2 0v-2H9a1 1 0 010-2h2V9a1 1 0 012 0v2z" />
</svg>
<svg x-show="faq.isOpen" class="w-8 h-8 fill-current" viewBox="0 0 24 24">
<path d="M12 22a10 10 0 110-20 10 10 0 010 20zm0-2a8 8 0 100-16 8 8 0 000 16zm4-8a1 1 0 01-1 1H9a1 1 0 010-2h6a1 1 0 011 1z" />
</svg>
</button>
<div class="text-gray-700 text-sm mt-2" x-text="faq.answer" x-show="faq.isOpen"></div>
</div>
</template>
</div>
</div>
<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine-ie11.min.js" defer></script>
<!-- https://scrimba.com/p/pdqbBcM/cLpn8pCR -->
<div class="container mx-auto px-2 py-2"
x-data="{
faqs: [
{
question: 'Why do I need Alpine JS?',
answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores iure quas laudantium dicta impedit, est id delectus molestiae deleniti enim nobis rem et nihil.',
isOpen: false,
},
{
question: 'Why am I so awesome?',
answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi cumque, nulla harum aspernatur veniam ullam provident neque temporibus autem itaque odit.',
isOpen: false,
},
{
question: 'Why learn on Scrimba?',
answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi cumque, nulla harum aspernatur veniam ullam provident neque temporibus autem itaque odit.',
isOpen: false,
},
]
}">
<h2 class="text-2xl font-bold">FAQs</h2>
<div class="leading-loose text-lg mt-6">
<template x-for="faq in faqs" :key="faq.question">
<div>
<button
class="w-full font-bold border-b border-gray-400 py-3 flex justify-between items-center mt-4"
@click="faq.isOpen = !faq.isOpen"
>
<div x-text="faq.question"></div>
<svg x-show="!faq.isOpen" class="w-8 h-8 fill-current" viewBox="0 0 24 24">
<path d="M12 22a10 10 0 110-20 10 10 0 010 20zm0-2a8 8 0 100-16 8 8 0 000 16zm1-9h2a1 1 0 010 2h-2v2a1 1 0 01-2 0v-2H9a1 1 0 010-2h2V9a1 1 0 012 0v2z"/>
</svg>
<svg x-show="faq.isOpen" class="w-8 h-8 fill-current" viewBox="0 0 24 24">
<path d="M12 22a10 10 0 110-20 10 10 0 010 20zm0-2a8 8 0 100-16 8 8 0 000 16zm4-8a1 1 0 01-1 1H9a1 1 0 010-2h6a1 1 0 011 1z"/>
</svg>
</button>
<div
class="text-gray-700 text-sm mt-2"
x-text="faq.answer"
x-show="faq.isOpen"
></div>
</div>
</template>
</div>
</div>
<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine-ie11.min.js" defer></script>
/* No context defined. */