Alpine Playground

by Emily Humphrey

HTML

<h1>
Alpine Playground
</h1>


	<h2>
	Expando
	</h2>
	
	<div x-data="{ open: false }">
    <button @click="open = !open" x-html="open ? 'Collapse' : 'Expand'">Expand</button>
    <div x-show="open">
        Content...
    </div>
	</div>
	<div x-data="{ open: false }">
    <button @click="open = !open" x-html="open ? 'Collapse' : 'Expand'">Expand</button>
    <div x-show="open">
        Content...
    </div>
	</div>
	<div x-data="{ open: false }">
    <button @click="open = !open" x-html="open ? 'Collapse' : 'Expand'">Expand</button>
    <div x-show="open">
        Content...
    </div>
	</div>
	<div x-data="{ open: false }">
    <button @click="open = !open" x-html="open ? 'Collapse' : 'Expand'">Expand</button>
    <div x-show="open">
        Content...
    </div>
	</div>
	
	
	<h2>
	Accordion
	</h2>
	
	
	<div x-data="{ open: 1 }">
		<div>
			<button @click="open = 1" x-html="open === 1 ? 'Collapse' : 'Expand'">Expand</button>
			<div x-show="open === 1">
					Content...
			</div>
		</div>
		<div>
			<button @click="open = 2" x-html="open === 2 ? 'Collapse' : 'Expand'">Expand</button>
			<div x-show="open === 2">
					Content...
			</div>
		</div>
		<div>
			<button @click="open = 3" x-html="open === 3 ? 'Collapse' : 'Expand'">Expand</button>
			<div x-show="open === 3">
					Content...
			</div>
		</div>
		<div>
			<button @click="open = 4" x-html="open === 4 ? 'Collapse' : 'Expand'">Expand</button>
			<div x-show="open === 4">
					Content...
			</div>
		</div>
	</div>

JavaScript

const posts = ["Item 1", "Item 2", "Item 3"];