jQuery Effects - Hide and Show

Hide, show, toggle, slide, fade in and fade out, and animation, wow!

Effect Demonstration

Click here to hide/display the panel

Time is money, so we provide you with quick and easy-to-understand learning content.

Here, you can get any knowledge you need in an easy-to-understand and convenient way.

Example

jQuery hide()
Demonstration of a simple jQuery hide() method.
jQuery hide()
Another hide() demonstration. How to hide part of the text.

jQuery hide() and show()

With jQuery, you can use hide() and show() methods to hide and display HTML elements:

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

Try It Yourself

Syntax:

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

Optional speed The parameter specifies the speed of hiding/displaying and can take the following values: "slow", "fast", or milliseconds.

Optional callback The parameter is the name of the function to be executed after hiding or displaying.

The following examples demonstrate the use of speed The hide() method parameters:

Example

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

Try It Yourself

jQuery toggle()

With jQuery, you can use the toggle() method to switch between hide() and show() methods.

Show the hidden elements and hide the displayed elements:

Example

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

Try It Yourself

Syntax:

$(selector).toggle(speed,callback);

Optional speed The parameter specifies the speed of hiding/displaying and can take the following values: "slow", "fast", or milliseconds.

Optional callback The parameter is the name of the function to be executed after the toggle() method is completed.

jQuery Effects Reference Manual

For a comprehensive look at jQuery effects, please visit our jQuery Effects Reference Manual.