alpine js
alpine js
xxxxxxxxxx<div x-data="{ open: false }"> <button @click="open = true">Open Dropdown</button> <ul x-show="open" @click.away="open = false" > Dropdown Body </ul></div>Source: github.com
Closely Related Answers
xxxxxxxxxx<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>Source: github.com
xxxxxxxxxx<!-- GET STARTED WITH ALPINEJS! --><script src="//unpkg.com/alpinejs" defer></script> <div x-data="{ open: false }"> <button @click="open = true">Expand</button> <span x-show="open"> Content </span></div>Source: alpinejs.dev
xxxxxxxxxx<script src="//unpkg.com/alpinejs" defer></script> <div x-data="{ open: false }"> <button @click="open = true">Expand</button> <span x-show="open"> Content </span></div>Source: Grepper
xxxxxxxxxx<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/alpine@v2.x.x/dist/alpine.min.js" defer></script>Source: Grepper
xxxxxxxxxx<div x-data="{ count: 0 }"> <button x-on:click="count++">Increment</button> <span x-text="count"></span></div>Source: alpinejs.dev
xxxxxxxxxx<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>Source: github.com
xxxxxxxxxx< script src = " https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.xx/dist/alpine.min.js " defer > </ script >Source: github.com
xxxxxxxxxx<html><head> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script></head><body> <h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1></body></html>Source: alpinejs.dev
xxxxxxxxxx<html> <head> <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script> </head> </html>Source: alpinejs.dev
Twitter 
LinkedIn