x-show

x-show provides an expressive way to show and hide DOM elements.

Here's an example of a simple dropdown component using x-show:

<!-- x-on is covered later in this book -->
<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.

Using the important modifier

Sometimes you need to apply a little more force to actually hide an element. In cases where a CSS selector applies the display property with the !important flag, it will take precedence over the inline style set by Alpine.

In these cases you may use the .important modifier to set the inline style to display: none !important.

<div x-data="{ open: false }">
    <button x-on:click="open = ! open">Toggle Dropdown</button>
 
    <div x-show.important="open">
        Dropdown Contents...
    </div>
</div>