<div x-data="{ open: false }">
<button @click="open = true">Open Dropdown</button>
<ul
x-show="open"
@click.away="open = false"
>
Dropdown Body
</ul>
</div>< script src = " https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js " defer > </ script ><html> <head> ... <script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script> </head> ...</html><div x-data="{ tab: 'foo' }">
<button :class="{ 'active': tab === 'foo' }" @click="tab = 'foo'">Foo</button>
<button :class="{ 'active': tab === 'bar' }" @click="tab = 'bar'">Bar</button>
<div x-show="tab === 'foo'">Вкладка Foo</div>
<div x-show="tab === 'bar'">Вкладка Bar</div>
</div>