jQuery show() Effect

The jQuery show effect is used to show each of the selected elements which is disabled. This is similar to 'display:block' css style.

Syntax of show() Effect

$(selector).show(speed, callback) 

The selector is the element which to be shown. Both speed and callback parameters are optional. The speed parameter specifies either in milliseconds or a few predefined strings, slow and fast. The callback function is called after the element is completely displayed.

Example

<style>.cls { display: none;}
</style>
<p id="demo" class="cls"> Hello World!</p>
<button id="btn">Show</button>

<script>
$(document).ready(function(){
$("#btn").click(function() {
$("#demo").show();
});
});
</script>

Output of the above code

Hello World!

In the above example, when the user click on the 'Show Text' button, the paragraph of 'demo' id get displayed.

Example - show() with time and callback function

<style>
.demobox { 
width: 200px; 
height: 150px; 
background-color: pink;
border: 4px solid black;
display: none;
padding: 22px;
}
</style>

<div id="demo" class="demobox"> Demo Box</div>
<br/>
<button id="btn">Show Box</button>

<script>
(function( $ ) { 
$("button#btn").click(function() {
$("div#demo").show("slow", function() {
alert( "Animation complete!" );
});
});	
})(jQuery);
</script>

Output of the above code

In the above example, when the user click on the 'Show Box' button, the div box of 'demo' id get displayed.