w3collective/alpine-accordion.html

## alpine-accordion.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Alpine.js Accordion</title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
    <script src="https://unpkg.com/alpinejs" defer></script>
  </head>
  <body>
    <div x-data="accordion" class="p-3">
      <template x-for="accordion in data" :key="accordion.id">
        <div class="accordion">
          <button
            @click="data = data.map(i => ({ ...i, isOpen: i.id !== accordion.id ? false : !i.isOpen}))"
            class="w-full flex justify-between items-center border-b py-3"
          >
            <h3 x-text="accordion.heading" class="font-bold" ></h3>
            <span x-show="accordion.isOpen">-</span>
            <span x-show="!accordion.isOpen">+</span>
          </button>
          <div x-text="accordion.content" x-show="accordion.isOpen" class="py-3" ></div>
        </div>
      </template>
    </div>
    <script>
      document.addEventListener('alpine:init', () => {
        Alpine.data('accordion', () => ({
          data: [
            {
              id: '1',
              heading: 'What is Alpine.js?',
              content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis pharetra dui, ac feugiat metus. Vivamus id pellentesque urna, quis hendrerit tortor. Sed pharetra sapien a metus fringilla varius.',
              isOpen: false,
            },
            {
              id: '2',
              heading: 'Is Alpine.js better than jQuery?',
              content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis pharetra dui, ac feugiat metus. Vivamus id pellentesque urna, quis hendrerit tortor. Sed pharetra sapien a metus fringilla varius.',
              isOpen: false,
            },
            {
              id: '3',
              heading: 'Who created Alpine.js?',
              content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis pharetra dui, ac feugiat metus. Vivamus id pellentesque urna, quis hendrerit tortor. Sed pharetra sapien a metus fringilla varius.',
              isOpen: false,
            },
          ]
        }))
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Alpine.js Accordion</title>
	<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
	<script src="https://unpkg.com/alpinejs" defer></script>
	</head>
	<body>
	<div x-data="accordion" class="p-3">
	<template x-for="accordion in data" :key="accordion.id">
	<div class="accordion">
	<button
	@click="data = data.map(i => ({ ...i, isOpen: i.id !== accordion.id ? false : !i.isOpen}))"
	class="w-full flex justify-between items-center border-b py-3"
	>
	<h3 x-text="accordion.heading" class="font-bold" ></h3>
	<span x-show="accordion.isOpen">-</span>
	<span x-show="!accordion.isOpen">+</span>
	</button>
	<div x-text="accordion.content" x-show="accordion.isOpen" class="py-3" ></div>
	</div>
	</template>
	</div>
	<script>
	document.addEventListener('alpine:init', () => {
	Alpine.data('accordion', () => ({
	data: [
	{
	id: '1',
	heading: 'What is Alpine.js?',
	content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis pharetra dui, ac feugiat metus. Vivamus id pellentesque urna, quis hendrerit tortor. Sed pharetra sapien a metus fringilla varius.',
	isOpen: false,
	},
	{
	id: '2',
	heading: 'Is Alpine.js better than jQuery?',
	content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis pharetra dui, ac feugiat metus. Vivamus id pellentesque urna, quis hendrerit tortor. Sed pharetra sapien a metus fringilla varius.',
	isOpen: false,
	},
	{
	id: '3',
	heading: 'Who created Alpine.js?',
	content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis pharetra dui, ac feugiat metus. Vivamus id pellentesque urna, quis hendrerit tortor. Sed pharetra sapien a metus fringilla varius.',
	isOpen: false,
	},
	]
	}))
	});
	</script>
	</body>
	</html>