jQuery hide()

jQuery supports many types of effects, that makes the development process easy and user friendly. Hiding is one of such effects. The hide() method serves this purpose.

hide() method is used to hide the selected elements.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$("#hide").click(function(){
    	$("p").hide();
	});
});
</script>
</head>
<body>
 
<p>Click the button and I will disappear.</p>
 
<button id="hide">Hide</button>
 
</body>
</html>

Try it

JS Bin on jsbin.com
hide() method can include some other parameters too. These parameters are used to make the effect more specific.

Syntax:

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

Speed:

  • Speed is an optional parameter that specifies the speed of the delay in animation (hiding).
  • It can accept string values: “slow”, “fast”, or milliseconds.
  • The default speed is 400 milliseconds.
  • On using “slow” keyword as the value for the speed parameter, the compiler take it as 600 milliseconds.
  • Similarly, on using “fast” keyword as the value for the speed parameter, the compiler take it as 200 milliseconds.

Callback:

  • Callback is also an optional parameter.
  • Callback is the function to be executed once the hide() method’s execution is complete.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$("button").click(function(){
    	$("p").hide("fast");
	});
});
</script>
</head>
<body>
 
<button>Hide</button>
 
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
 
</body>
</html>

Try it

JS Bin on jsbin.com

Please Share