jQuery Show, Hide, and Toggle

The simplest jQuery animation methods are .show(), .hide(), and .toggle(). These three methods let you reveal or conceal elements with an optional animated transition, and they form the foundation of interactive UI patterns like accordions, dropdowns, and collapsible sections.

Instant and Animated

Called without arguments, .show() and .hide() change the display property instantly. Pass a duration — either a number in milliseconds or the strings 'slow' (600 ms) or 'fast' (200 ms) — to animate the width, height, and opacity simultaneously.

Toggle

.toggle(duration) shows hidden elements and hides visible ones, making it perfect for a single button that opens and closes a panel. You can also pass a boolean to force a specific state: .toggle(true) always shows, .toggle(false) always hides.

.show() — instantly reveal
.hide(400) — animate hide over 400 ms
.toggle('slow') — animated flip of visibility
Callback argument fires when animation completes

Example

// Instant show/hide
$('#panel').hide();
$('#panel').show();

// Animated
$('#overlay').hide('fast');
$('#overlay').show(600); // 600 ms

// Toggle a sidebar
$('#sidebar-toggle').on('click', function () {
    $('#sidebar').toggle('slow');
});

// Callback after animation
$('#modal').hide(400, function () {
    $(this).remove(); // remove from DOM after fade
});

// Force state
$('#tooltip').toggle( $('#show-tip').is(':checked') );

JAVASCRIPT

Full Editor

Pro Tip

Pass a callback as the last argument to run code exactly when the show/hide animation finishes.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned