Web Components Library

Toggle

No notes defined.

  • Handle: @testing-alpine-v2-toggle
  • Preview:
  • Filesystem Path: components/10-other-examples/testing-playground/alpine-js-v2-examples/toggle.hbs 
<div x-data="{ isOpen: false }">
    <button class="bg-gray-400 px-3 py-2" @click="isOpen = !isOpen">Toggle</button>
    <h1 class="mt-6" x-show="isOpen">Test</h1>
</div>

<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine-ie11.min.js" defer></script>
 
<div x-data="{ isOpen: false }">
  <button class="bg-gray-400 px-3 py-2" @click="isOpen = !isOpen">Toggle</button>
  <h1 class="mt-6" x-show="isOpen">Test</h1>
</div>

<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine-ie11.min.js" defer></script>
 
/* No context defined. */