show
x-show
x-show
is one of the most useful and powerful directives in Alpine. It provides an expressive way to show and hide DOM elements.
Here's an example of a simple dropdown component using x-show
.
<div x-data="{ open: false }">
<button x-on:click="open = ! open">Toggle Dropdown</button>
<div x-show="open">
Dropdown Contents...
</div>
</div>
When the "Toggle Dropdown" button is clicked, the dropdown will show and hide accordingly.
If the "default" state of an
x-show
on page load is "false", you may want to usex-cloak
on the page to avoid "page flicker" (The effect that happens when the browser renders your content before Alpine is finished initializing and hiding it.) You can learn more aboutx-cloak
in its documentation.
With transitions
If you want to apply smooth transitions to the x-show
behavior, you can use it in conjunction with x-transition
. You can learn more about that directive here, but here's a quick example of the same component as above, just with transitions applied.
<div x-data="{ open: false }">
<button x-on:click="open = ! open">Toggle Dropdown</button>
<div x-show="open" x-transition>
Dropdown Contents...
</div>
</div>