jQuery Hide, Show & Toggle

One of the most fundamental interactions on a webpage is making elements appear and disappear. jQuery provides three simple methods for this: hide(), show(), and toggle(). These methods can work instantly or with a smooth animation, and they can also trigger a function after completing.

hide() and show()

The hide() method makes a selected element invisible by setting its CSS display property to none. The show() method reverses this.

Basic Usage

$("p#notice").hide();    // Hide immediately
$("p#notice").show();    // Show again

Simple Interactive Example

<p id="message">This is an important message.</p>
<button id="hideBtn">Hide</button>
<button id="showBtn">Show</button>

<script>
$(function() {
  $("#hideBtn").click(function() {
    $("#message").hide();
  });
  $("#showBtn").click(function() {
    $("#message").show();
  });
});
</script>

The toggle() Method

The toggle() method combines hide() and show() into one. If the element is visible, it hides it. If hidden, it shows it.

<div id="infoBox">Here is some extra information.</div>
<button id="toggleBtn">Show / Hide Info</button>

<script>
$(function() {
  $("#toggleBtn").click(function() {
    $("#infoBox").toggle();
  });
});
</script>

Using Speed Parameters

All three methods accept an optional speed parameter that makes the transition animated.

Built-in Speed Keywords

• "slow" — approximately 600 milliseconds
• "fast" — approximately 200 milliseconds

Custom Speed in Milliseconds

$("#panel").hide("slow");      // Slow animated collapse
$("#panel").show("fast");      // Fast animated expand
$("#panel").toggle(800);       // Custom 800ms transition

Animated Example

<div id="alertBox">Warning: This action cannot be undone!</div>
<button id="dismissBtn">Dismiss</button>

<script>
$(function() {
  $("#dismissBtn").click(function() {
    $("#alertBox").hide("slow");
  });
});
</script>

Callback Functions

A callback is a function that runs after the animation has fully completed. This is useful for chaining actions — for example, showing a confirmation message only after an element has finished disappearing.

$("#panel").hide(500, function() {
  alert("Panel is now hidden.");
});

Example: Sequential Step Display

<div id="stepOne">Step 1: Fill out the form.</div>
<div id="stepTwo" style="display:none;">Step 2: Review your details.</div>
<button id="nextBtn">Next Step</button>

<script>
$(function() {
  $("#nextBtn").click(function() {
    $("#stepOne").hide(400, function() {
      $("#stepTwo").show(400);
    });
  });
});
</script>

Step 2 only appears after Step 1 finishes hiding, creating a clean sequential flow.

Boolean Argument in toggle()

toggle() can also accept a boolean to force a specific state.

$("#box").toggle(false);    // Always hide
$("#box").toggle(true);     // Always show

Key Points

• hide() sets display: none; show() restores the original display value.
• toggle() switches between hidden and visible states automatically.
• Speed can be set with "slow", "fast", or a number in milliseconds.
• Callback functions run after the animation finishes — useful for sequencing interactions.
• Passing a boolean to toggle() forces the element into a specific state.