jQuery show() Method

What Is show()?

.show() displays matched elements (since jQuery 1.0). With no arguments it is instant and restores the display value saved by .hide() — so inline, block, flex, and others come back correctly. With a duration it becomes an animation.

$(".target").show()                 // instant
$("p").show("slow")                 // 600ms animation
$("#box").show(200, function () {}) // duration + complete

// Not the same as always forcing block:
// .css("display", "block")  vs  restore saved display

// Pair with the opposite:
$(".panel").hide()
$(".panel").show()

How to Use show()

Select hidden elements, call show, optionally animate and run a callback.

1. Select the element(s) you want to reveal.
2. Call .show() for an instant reveal, or pass a duration / options.
3. Optionally add a complete callback (runs once per matched element).
4. Chain further methods on the same collection if needed.

Pseudocode

for each element in matched set:
  saved = display saved by .hide() (if any)
  if no duration:
    set display to saved (or default for that tag)
  else:
    animate width, height, opacity
    then set display to saved
    then call complete (this = element)

return matched set

// Rough idea without restore:
// .css("display", "block") always forces block

Cheat Sheet

Keep these facts handy while revealing elements.

Live Preview

Hide a demo panel, then reveal it with instant or animated .show().

Ready — hide first, then show.

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

// <div id="box" style="display:none">Hello</div>
$("#box").show();

Hello
(display restored — visible)

// <p style="display:none">Hello</p>
// <p style="display:none">World</p>
$("p").show("slow");

Hello
World
(animated over ~600ms)

$("#msg").show(400, function () {
  $(this).text("Now visible");
});

Now visible

// <span id="label">Inline</span>
$("#label").hide();          // saves display: inline
$("#label").show();          // restores inline
// NOT the same as:
// $("#label").css("display", "block");

display after show: inline

$("div.step").first().show("fast", function showNext() {
  $(this).next("div.step").show("fast", showNext);
});

One
Two
Three
(each appears after the previous finishes)

Performance Notes

Instant .show() is cheap. Animating many elements at once can hurt performance — prefer classes for bulk visibility when possible.

Key Takeaways