DEV Community

Cover image for Learn how to use x-show in AlpineJS
saim
saim

Posted on • Originally published at larainfo.com

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>


Enter fullscreen mode Exit fullscreen mode

To Show

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



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


Enter fullscreen mode Exit fullscreen mode

or



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


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

x-show not working
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>


Enter fullscreen mode Exit fullscreen mode

x-show working

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>


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode




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

Top comments (0)