jQuery Hide and Show

jQuery Hide and Show

With jQuery, you can hide and show HTML elements easily.

This creates a dynamic and interactive experience for the user.

Search engines also understand these standard DOM manipulations perfectly.

The hide() and show() Methods

The hide() method makes a visible element disappear.

The show() method makes a hidden element visible again.

You typically attach these to user events, like clicking a button.

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

Adding Speed Parameters

Both hide() and show() can take an optional speed parameter.

This parameter dictates how fast the element should disappear or appear.

The speed parameter can take the values: "slow", "fast", or milliseconds.

$("button").click(function(){
  // Hides the paragraph slowly over 1000 milliseconds (1 second)
  $("p").hide(1000);
});

The toggle() Method

Sometimes you want a single button to both hide and show an element.

You can toggle between hiding and showing with the toggle() method.

If the element is hidden, toggle() will show it.

If the element is visible, toggle() will hide it.

$("button").click(function(){
  $("p").toggle();
});