Latest web development tutorials

jQuery effects - Hide and Show

Hide, display, switching, slide, fade and animation, oh wow!

Click the Show / Hide Panel

Because time is precious, we offer a fast and convenient way to learn.

In this tutorial, you can learn the knowledge needed.

Examples

jQuery hide ()
Simple jQuery hide () method demonstrates.

jQuery hide ()
Another hide () instance. Demonstrates how to hide text.

jQuery hide () and show ()

By jQuery, you can use the hide () and show () method to hide and show HTML elements:

Examples

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

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

try it"

grammar:

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

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

The optional speed parameter specifies the speed hide / show, you can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is the name of the function to hide or show completed executed.

The following example demonstrates the hide with the speed parameter () method:

Examples

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

try it"

jQuery toggle ()

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

Show the hidden elements, and hide displayed elements:

Examples

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

try it"

grammar:

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

The optional speed parameter specifies the speed hide / show, you can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is the name of the function after toggle () method to complete the execution.