jQuery Hide & Show : Effect



jQuery hide() and show() :

  1. In jQuery we can use hide() and show() methods to achieve the hide and show effect.
  2. hide() method is used to hide the selected element
  3. show() method will be used to show the selected element.

Syntax :

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

Example :

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("h1").hide();
  });
  $("#show").click(function(){
    $("h1").show();
  });
});
</script>
</head>
<body>

<h1>Click "Hide" button to hide me</h1>
<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

Try it yourself »

Explanation :

In this example, we need to first include the jquery file in the HTML head section. After including the jQuery in the head section we can use jQuery library in our HTML file.

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

When “hide” button will be clicked then <h1> elements will be made hidden in the given HTML file.

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

When the user will click on the “show” button then all the <h1> elements will be made visible.

Timing Parameter to make hide and show effects faster :

$("h1").hide(1000);
$("h1").show(1000);

Try it yourself »

  1. Speed parameter can be – “fast”,”slow” or any integer value which represents time in milliseconds.
  2. If we change the speed parameter in hide() method then element will be made hidden in 100 ms only.