Created
September 10, 2020 21:17
-
-
Save javedbaloch4/9a5d5e2f1eb6f6c434d64c8a7ab8b022 to your computer and use it in GitHub Desktop.
AlpineJS Loops Accordion & Toggle.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<title>Home</title> | |
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.6.0/dist/alpine.min.js" defer></script> | |
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> | |
<link rel="stylesheet" href=""> | |
</head> | |
<body class="text-gray-800"> | |
<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 | |
@click=" faq.isOpen = !faq.isOpen" | |
class="w-full font-bold border-b border-gray-400 py-3 flex justify-between items-center mt-4"> | |
<div x-text="faq.question"></div> | |
<svg x-show="!faq.isOpen" class="fill-current" viewBox="0 0 24 24" width="24" height="24"><path | |
class="heroicon-ui" 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="fill-current" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" | |
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.question" x-show="faq.isOpen"></div> | |
</div> | |
</template> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment