Black friday

Save big!

All courses under $5 - for a limited time!

Code has been added to clipboard!

Displaying Previously Hidden Elements With jQuery .show() Method

Reading time 1 min
Published Jan 16, 2018
Updated Oct 2, 2019

jQuery show: Main Tips

  • The jQuery .show() method makes the selected element visible.
  • It makes jQuery unhide what was hidden using .hide().

Displaying Hidden Elements

The jQuery .show() function turns the selected element visible. Usually, it is the same element that was previously hidden by using .hide().

In the example below, you can make jQuery show div element by clicking a button:

Example
$("button").click(() => {
    $("div").show();
});

You can use .show jQuery method without any parameters for a simple display function with no animation. However, you may also use additional parameters to animate it:

$("selector").show(length, easing, callback);

There are three parameters you may add for jQuery .show:

  • length represents the animation duration in milliseconds (400 by default). Keyword values may also be used: slow represents 600 ms, fast - 200 ms.
  • easing is defined by keywords: linear means consistent animation speed, and swing begins slow, then speeds up.
  • callback specifies a function to execute after the .show jQuery animation finishes.