jQuery Show() Method – To Show Hidden elements in your web page

The jQuery Show method is used to un-hide (show) hidden elements in a web page. This is similar to the CSS property display:block.

Note: jQuery Show method works on element that are display:none but not on visibility:hidden.

Syntax of jQuery Show – .show()

$(selector).show(speed,easing,callback)

Note that all the 3 parameters of show method are optional.

.show() example: Show a hidden div

The below div is hidden because of style=”display:none”.

<div id="div1" style="display:none">
    Hello, How are you ?
</div>

To show the div, the jQuery code will be:

$("#div1").show();

.show() example: Showing a div with Callback function

This time the hidden div will be shown by passing the callback function to the .show() method.

This function will be called when the .show() process is completed.

<div id="div2" style="display:none">
    Hello, How are you ?
</div>

So, when the show process gets completed then an alert box is shown.

$("#div2").show(function () {
    alert("Show method is completed!");
});

.show() example: Show a div with ‘slow’ speed, ‘linear’ easing and ‘callback’ Method

Now in this example I will use all the 3 parameters of the jQuery show method.

<div id="div3" style="display:none">
    Hello, How are you ?
</div>

The below .show() code will do the showing process in slow & linear manner, then a callback function will be called after the show process is completed.

$("#div3").show("slow", "linear", function () {
    alert("Show method is completed!");
});

The link to download the source code is below:

DOWNLOAD