In this Alpine js tutorial we will see x-show . x-show is one of the most useful and powerful directives in Alpine js. It provides show and hide DOM elements. x-show by default display: none; style on depending if the expression resolves to true or false. if true then it will show elements if false then it will hide the elements let see some example.
Example 1
it will not show .because show is false which mean it style is 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 many place like eg.
Show and hide Model
Drop down and Toggle
In FAQ Section
Responsive Navbar
Related Posts
👉 Alpine js x-data Tutorial by Example
👉 Build Simple Count App Using Alpine js with Tailwind CSS
👉 Alpine js hide show Password with Tailwind CSS Example