Easy Tutorial
❮ Jquery Traversing Misc Noop ❯

jQuery Effects - Hide and Show

Hide, show, toggle, slide, fade, and animate, wow!

Click to show/hide panel

Because time is precious, we provide quick and convenient learning methods.

At tutorialpro.org, you can learn the knowledge you need.


Examples

jQuery hide()

jQuery hide()


jQuery hide() and show()

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

Example

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

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

Syntax:

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

The optional callback parameter is the name of a function to be executed after the hide or show completes.

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

Example

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

The following example demonstrates the hide() method with a speed parameter and a callback function:

Example

$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() method completed!");
    });
  });
});

The second parameter is a string indicating which easing function to use for the transition. (Note: jQuery itself provides "linear" and "swing", others can be used with relevant plugins).


jQuery toggle()

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

Show hidden elements and hide displayed elements:

Example

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

Syntax:

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

The optional callback parameter is the name of a function to be executed after the hide or show completes.

❮ Jquery Traversing Misc Noop ❯