jQuery hide() Method

Last Updated:

jQuery hide() Method

The jQuery hide() method hides the matched elements.

Note: With no parameters, the .hide() method is the simplest way to hide an element.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery hide() Method</h1> <button id="myHide">Hide</button> <button id="myShow">Show</button> <script> $(document).ready(function(){ $("#myHide").click(function(){ $("p").hide(); }); $("#myShow").click(function(){ $("p").show(); }); }); </script> </body> </html>

Syntax

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

Parameter Values

ValueTypeExplanation
speed Optional Specifies the speed of the hide effect.
Default value is 400 milliseconds.
Possible values are
  • "slow"
  • "fast"
  • milliseconds
easing Optional Specifies the easing function to use for the transition.
Default value is "swing"
Possible values are
  • "swing"
  • "linear"
callback Optional Specifies a function to be called once the hide() medthod is completed.

Browser Support

Devicedesktopmobile
Browsergoogle chromesafarifirefoxinternet Exploreredgeoperagoogle chromesafarifirefoxedgeoperaandroid webviewsamsung internet
hide()YesYesYesYesYesYesYesYesYesYesYesYesYes

hide() with Speed

In the following example, we will specify the speed of the hide effect to 2000ms (2 seconds).

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery hide() Method</h1> <button id="myHide">Hide</button> <button id="myShow">Show</button> <script> $(document).ready(function(){ $("#myHide").click(function(){ $("p").hide(2000); }); $("#myShow").click(function(){ $("p").show(); }); }); </script> </body> </html>

hide() with Easing

In the following example, we will specify the easing function for hide() method to linear.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery hide() Method</h1> <button id="myHide">Hide</button> <button id="myShow">Show</button> <script> $(document).ready(function(){ $("#myHide").click(function(){ $("p").hide(2000, "linear"); }); $("#myShow").click(function(){ $("p").show(); }); }); </script> </body> </html>

hide() with Callback

In the following example, we will call a function (myFunction) once the hide effect is finished.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery hide() Method</h1> <button id="myHide">Hide</button> <button id="myShow">Show</button> <script> $(document).ready(function(){ $("#myHide").click(function(){ $("p").hide(2000, "linear", function(){ alert("show() method completed"); }); }); $("#myShow").click(function(){ $("p").show(); }); }); </script> </body> </html>

Share this Page

Meet the Author