How to use the jQuery show() method?

The jQuery show() method is used to show hidden elements of HTML in the document. Please note that $.show method would not show elements which property are set to Hidden, i.e. visibility:hidden.

The elements made hidden by using hide() method or with CSS property display: none; can be shown by using the show() method.

Syntax of using the show jQuery method

This is how you may use the show() method:



Selector = can be an element like div, p, etc.
Speed = Optional parameter that specifies the hide speed with possible values of

  1. “slow”
  2. “fast”
  3. Or value in milliseconds

Callback = after show () method is completed, an optional callback function to perform a certain action can be given.

Example of using show() method

Open the demo page by clicking the image or link below. Click on the “Show yellow line” button for displaying the yellow line by using the $.show() method. For the speed, I used the “slow” value for displaying the element.

Note that, the yellow line was hidden initially by using the display: none property of CSS:

Experience this example online

jQuery $.show with fast value

For this example, I am using “fast” value for the speed parameter. See how red line displays as you click the button:

Experience this example online

The code:

Using speed in milliseconds example

As mentioned earlier, you may provide speed as fast, slow, and duration in milliseconds. For this demo, I used the speed in milliseconds. This is relatively slow as I used 3000 value i.e. three seconds for displaying the blue line upon clicking the button.

Experience this example online

Example of show method with callback function

In this example, the callback function is used to display the alert after the show() method is executed. That means, as the yellow line appears completely, the $.show method’s callback function will execute where I placed an alert’s code:

Experience this example online

Also see: jQuery hide() method | jQuery toggle()