jQuery Introduction | Effects | Showing and Hiding Elements .hide() .show() .toggle()

Showing and Hiding Elements

The .hide() method makes the selected element disappear instantly, and the .show() method makes it appear.

.hide() and .show() Methods - Showing and Hiding Elements

An element hidden through the .hide() method is hidden by setting its CSS display property value to none. An element hidden through the .show() method is displayed by setting its CSS display property value to block.

$("#btnHide").on("click", function() {
  $("div").hide();
});
$("#btnShow").on("click", function() {
  $("div").show();
});

In the example above, the <div> element is hidden with .hide() and then displayed with .show().

Run code

You can also hide an HTML element by setting the CSS visibility property value to hidden.
However, in that case the hidden element is merely not visible and still affects the layout of the web page.

.hide() and .show() Methods - Setting Effect Speed

You can also set the speed of the effect by passing milliseconds as an argument or by passing reserved words such as "slow" or "fast".

$("#btnHide").on("click", function() {
  $("div").hide(1000);
});
$("#btnShow").on("click", function() {
  $("div").show("fast");
});

In the example above, the speed of the effect is set for the .hide() and .show() methods.

Run code

.toggle() Method - Toggling Element Display State

jQuery has a .toggle() method that performs different actions depending on the current display state of the selected element. If the selected element is currently hidden, it performs the action of .show(). If it is visible, it performs the action of .hide().

$("#btnToggle").on("click", function() {
  $("div").toggle();
});

In the example above, when the element with the id btnToggle is clicked, the <div> element alternates between being displayed and hidden.

Run code