jQuery - jQuery hide()/show()

Sometimes, you want to make something on your webpage disappear or reappear—like a magic trick! With jQuery, that’s super simple using just two commands: hide() and show().

 What do hide() and show() do?

  • hide() – makes the selected element disappear from the page.

  • show() – makes it come back and become visible again.

Think of it like turning a light switch off and on.

 Basic Syntax

$(selector).hide();
$(selector).show();

  • selector: tells jQuery what to hide or show (like an image, paragraph, or button)

 Example 1: Hiding a Paragraph

<p id="myText">This is some text.</p>
<button id="hideBtn">Hide Text</button>

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

 When the user clicks the button, the paragraph disappears!

 Example 2: Show It Again

Let’s add a “Show” button too!

<button id="showBtn">Show Text</button>

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

Now you have buttons to hide and show the text whenever you want!

 Smooth Effects with Speed

You can add speed to make it look smooth:

$("#myText").hide(1000); // hides in 1 second
$("#myText").show("slow"); // shows slowly

 Final Tip

You can also use .toggle() if you want to switch between show and hide with one button:

$("#toggleBtn").click(function() {
  $("#myText").toggle();
});