DEV Community

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

Posted on • Originally published at larainfo.com

2

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

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay