jQuery toggle() Method

jQuery toggle() method display or hide the selected elements. jQuery toggle() method actual set in-line CSS property either style="display: none;" or style="display: block;" on selected element. And selected elements will be hide/show immediately with no animation.

jQuery toggle() method toggle between hide() and show() for the selected elements.

Syntax

This syntax represent to the toggle() method

$(selector).toggle( duration, callback );
Parameter Type Description
duration Number
String		 Required. Accept string or number that determining how long the animation will run.
default value is 400
Accepted values:
  • Predefined duration ("slow", "normal", "fast")
  • number of milliseconds (3000, 1000)
callback Function Optional. A function to call once the the animation is complete.

Example

Here, in this example show toggle() effect on selected elements when click on button.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery toggle() method</title>
  <script src="jquery-latest.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#toggle").click(function () {
        $("p").toggle();
      }); 
    });
  </script>
  <style type="text/css">
    p {
      background-color:#99FFFF;
      font-size:16px;
      font-family:Verdana;
    }
  </style>
</head>
<body> 
  <button id="toggle">Hide/Show</button> 
  <p style="">This paragraph will hide/show</p>
</body> 
</html>

Run it...   »