Hiding and showing content with Alpine.js

Showing and hiding (toggling) content in Alpine.js makes use of simple Boolean logic:

Breaking that down:

• x-data contains a single Boolean state variable, open
  • true if the content is shown
  • false if the content is hidden
• x-on:click listens for a click on the button
  • open = !open provides the fundamental Boolean logic for switching between true and false states
  • x-on:click.outside allows that "click anywhere to make it disappear" functionality
• x-show does the conditional rendering
  • depends on the open state variable declared in x-data
  • this will also keep the element in the DOM
    • to remove it from the DOM completely, we should use x-if