jQuery .show() Method

What You’ll Learn

The .show() method displays matched elements instantly or with a smooth animation. This tutorial covers the no-argument form since jQuery 1.0, duration strings like "slow" and "fast", complete callbacks, how jQuery restores saved display values from .hide(), sequential reveal patterns, comparisons with .css() and .toggle(), the official jQuery API demos, and five practical try-it examples.

Introduction

After you hide content with jQuery, you need a reliable way to bring it back. The .show() method reveals matched elements — either instantly or with a fade-and-grow animation — and restores the correct display value for each element.

With no parameters, .show() is the simplest approach: elements become visible immediately. This is similar to .css( "display", "block" ), but smarter: jQuery reads the display value it saved when you previously called .hide(), so an inline element returns to inline, not block.

Pass a duration — milliseconds, "slow" (600 ms), or "fast" (200 ms) — and .show() animates width, height, and opacity while revealing the element. Pair it with .hide() for complete show/hide control. Browse the jQuery DOM hub for related methods.

Understanding the .show() Method

.show( [duration ] [, complete ] ) operates on a jQuery collection. Each matched element is displayed; the method returns the same collection for chaining. Elements must exist in the DOM — typically they were hidden with .hide(), CSS display: none, or markup that starts hidden.

When animation is involved, the complete callback fires once per matched element after that element’s animation finishes. Inside the callback, this refers to the DOM element. Use it to update text, focus inputs, or chain the next animation in a sequence.

📝 Syntax

jQuery .show() supports several forms:

Instant show — since 1.0

.show()

• No arguments — reveals elements immediately with no animation.
• Restores the saved display value from a prior .hide() call.

Animated show with duration

.show( duration [, complete ] )

// Milliseconds (default animation length is 400 when duration provided)
.show( 600 )

// Named speeds
.show( "slow" )   // 600 ms
.show( "fast" )   // 200 ms

Options object — since 1.0

.show( {
  duration: 400,
  easing: "swing",
  complete: function() {
    // Called once per matched element when its animation finishes
  }
} )

Easing form — since 1.4.3

.show( duration [, easing ] [, complete ] )

.show( 600, "linear", function() {
  console.log( "Visible!" );
} );

Examples Gallery

Example 1 covers instant showing. Examples 2–5 follow the official jQuery API documentation — slow reveal of hidden paragraphs, sequential sibling animation, image show with callback, and form-driven show with text update. Use DevTools or the Try-it links to run each snippet in the browser.

$( ".target" ).show();

// Restores saved display from .hide()
// Roughly like .css( "display", "block" ) but smarter for inline/flex elements

Before: .target elements hidden (display: none)
After .show(): elements visible in layout instantly
Inline elements stay inline; block elements stay block

No animation — fires immediately

// CSS: p { display: none; }  (or hidden via .hide())

$( "button" ).on( "click", function() {
  $( "p" ).show( "slow" );
} );

Initial state: paragraphs hidden
Click "Show it": paragraphs grow and fade in over 600 ms ("slow")
All matched <p> elements animate together

Official jQuery API Example 1 pattern

$( "#showr" ).on( "click", function() {
  $( "div" ).first().show( "fast", function showNext() {
    $( this ).next( "div" ).show( "fast", showNext );
  } );
} );

$( "#hidr" ).on( "click", function() {
  $( "div" ).hide( 1000 );
} );

Click "Show": first div appears (200 ms "fast")
Callback runs → next sibling shows → repeats until all visible
Click "Hide": all divs hide over 1000 ms

Official jQuery API Example 2 pattern — chained callbacks

$( "#clickme" ).on( "click", function() {
  $( "#book" ).show( "slow", function() {
    // Animation complete.
  } );
} );

Click trigger: #book grows and fades in over 600 ms
When animation ends: complete callback runs
this inside callback → the #book DOM element

Chain focus, logging, or next animation in complete

$( "form" ).on( "submit", function( event ) {
  if ( $( "input" ).val() === "yes" ) {
    $( "p" ).show( 4000, function() {
      $( this ).text( "Ok, DONE! (now showing)" );
    } );
  }
  $( "span,div" ).hide( "fast" );
  event.preventDefault();
} );

Type "yes" + submit: <p> animates in over 4000 ms
On complete: text changes to "Ok, DONE! (now showing)"
Other span/div elements hide fast on every submit

Official jQuery API Example 3 pattern — conditional show

🚀 Common Use Cases

• Reveal hidden panels — show accordion sections, FAQ answers, or settings blocks.
• Restore after .hide() — bring back menus and tooltips hidden on blur or timeout.
• Step wizards — show the next step and hide the current one in multi-page forms.
• Loading complete — show content instantly when Ajax data arrives.
• Staggered lists — reveal items one-by-one with sequential callbacks.
• User confirmation — animate success messages after form validation passes.

📝 Notes

• Available since jQuery 1.0; easing parameter added in jQuery 1.4.3.
• No-argument form shows instantly — restores saved display, not always block.
• "slow" = 600 ms, "fast" = 200 ms; numeric default when animating is 400 ms.
• With duration 0 or jQuery.fx.off = true, animation is skipped.
• Callback runs once per matched element, not once for the whole animation batch.
• Does not override display: none !important — use class toggling instead.
• Animating many elements at once may affect performance; profile if needed.

💡 Best Practices