jQuery Effects - Hide and Show

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

Effect Demonstration

Click here to hide/show 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()
Demonstrate 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 or showing, and can take the following values: "slow", "fast", or milliseconds.

Optional callback The parameter is the name of the function executed after hiding or showing is completed.

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 or showing, and can take the following values: "slow", "fast", or milliseconds.

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

jQuery Effects Reference Manual

For a comprehensive review of jQuery effects, please visit our jQuery Effects Reference Manual.