1. Home
  2. jQuery effects - Hide and Show

The best jQuery effects - Hide and Show Tutorial In 2024, In this tutorial you can learn Examples,jQuery hide () and show (),Examples,Examples,jQuery toggle (),Examples,

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();
});

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);
});


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();
});

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.

Hot Tools

Other Tools

Online Tutorial

Website Navigation

jQuery effects - Hide and Show
10/30