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

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()


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

speedSpecifies the speed of the show effect. It can have values: “slow”, “fast”, In milliseconds eg “200”, “300”, “1000”, etc.
easingEasing creates animated effect while showing an element. It defines the speed of the element in different points of the animation. The default value is “swing”. Easing values can be: “swing” – slower at the beginning & end. Faster in the middle, “linear” – constant speed.
callbackA function that executes after the .show() method completes.

.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 ?

To show the div, the jQuery code will be:


.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 ?

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 ?

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:



  • linkedin
  • reddit


I hope you enjoyed reading this tutorial. If it helped you then consider buying a cup of coffee for me. This will help me in writing more such good tutorials for the readers. Thank you. Buy Me A Coffee donate

Leave a Reply

Your email address will not be published. Required fields are marked *