jQuery toggle() Method

Last Updated:

jQuery toggle() Method

The jQuery toggle() method toggles (display or hide) the matched elements.

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 toggle() Method</h1> <button>toggle() - Hide/Show</button> <script> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); }); </script> </body> </html>

Syntax

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

Parameter Values

ValueTypeExplanation
speed Optional Specifies the speed of the toggle - hide/show 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 toggle() medthod is completed.

Browser Support

Devicedesktopmobile
Browsergoogle chromesafarifirefoxinternet Exploreredgeoperagoogle chromesafarifirefoxedgeoperaandroid webviewsamsung internet
toggle()YesYesYesYesYesYesYesYesYesYesYesYesYes

toggle() with Speed

In the following example, we will specify the speed of the toggle effect (show/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 toggle() Method</h1> <button>toggle() - Hide/Show</button> <script> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(2000); }); }); </script> </body> </html>

toggle() with Easing

In the following example, we will specify the easing function for toggle() 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 toggle() Method</h1> <button>toggle() - Hide/Show</button> <script> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(2000, "linear"); }); }); </script> </body> </html>

toggle() with Callback

In the following example, we will call a function (myFunction) once the toggle effect (show/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 toggle() Method</h1> <button>toggle() - Hide/Show</button> <script> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(2000, "linear", function(){ alert("toggle() method completed"); }); }); }); </script> </body> </html>

Share this Page

Meet the Author