Learn how to use x-show in AlpineJS

In this Alpine.js tutorial, we will explore x-show. x-show is one of the most useful and powerful directives in Alpine.js. It allows you to show and hide DOM elements based on a condition. By default, x-show applies display: none; style to elements depending on whether the expression resolves to true or false. If true, the elements will be shown; if false, they will be hidden. Let's explore some examples.

Example 1

It will not show because the show value is false, which means its style is set to display: none.

<div x-data="{ show: false }">
    <p x-show="show">not show if false</p>
    <p> <strong x-text="show"></strong> </p>
</div>

To Show

if you want to show you need to give show value true.

<p x-show="show = true">not show if false</p>  

or

<p x-show="!show">not show if false</p>

Warning ⚠️
if you are using two elements at the same time print then both will be true to avoid problem you need to opposite(!).

<div x-data="{ show: false }">
    <p x-show="show">not working !</p>
    <p x-show="show = true">It working !</p>
    <p> <strong x-text="show"></strong> </p>
</div>

Do This ✅

<div x-data="{ show: false }" class="text-center">
    <p x-show="show">not working !</p>
    <p x-show="!show">It working !</p>
    <p> <strong x-text="show"></strong> </p>
</div>

Example 2

If you want to show element one time at click.

<div x-data="{ show: false }">
    <button x-on:click="show = true">show</button>
    <p x-show="show">show Paragraph</p>
</div>

Do This ✅

If you want to show and hide then use = ! it react opposite value.

<div x-data="{ show: false }">
    <button x-on:click="show = !show">show</button>
    <p x-show="show">show Paragraph</p>
</div>

For much better Do This ✅

if you want show and hide with button value then do this.

<div x-data="{ show: false }">
    <button x-on:click="show = !show" x-text="!show ? 'Show' : 'Hide'">show</button> 
    <p x-show="show">show Paragraph</p>
</div>

Use of x-show

We can use x-show in many places, such as:

Showing and hiding modals
Creating dropdowns and toggles
Implementing FAQ sections
Designing responsive navbars