scrimba
Alpine JS
Accordion Toggle and loops
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Accordion Toggle and loops
AboutCommentsNotes
Accordion Toggle and loops
Expand for more info
accordion.html
run
preview
console
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@1.2.0/dist/tailwind.min.css">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.8/dist/alpine.js" defer></script>
</head>
<body class="text-gray-800">
<div class="container mx-auto px-2 py-2">
<h2 class="text-2xl font-bold">FAQs</h2>
<div class="leading-loose text-lg mt-6">
<div>
<button
class="w-full font-bold border-b border-gray-400 py-3 flex justify-between items-center mt-4"
>
<div>Question 1 goes here</div>
<svg 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 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"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro amet repellat recusandae, dolorem, vitae minima eveniet, molestias quia praesentium.
</div>
</div>
<div>
<button
class="w-full font-bold border-b border-gray-400 py-3 flex justify-between items-center mt-4"
>
<div>Question 2 goes here</div>
<svg 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 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"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro amet repellat recusandae, dolorem, vitae minima eveniet, molestias quia praesentium.
</div>
<div>
<button
class="w-full font-bold border-b border-gray-400 py-3 flex justify-between items-center mt-4"
>
<div>Question 3 goes here</div>
<svg 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 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"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro amet repellat recusandae, dolorem, vitae minima eveniet, molestias quia praesentium.
</div>
</div>
</div>
</div>
</body>
</html>
Console
/accordion.html
-7:11