jQuery toggle()

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

jQuery toggle()

The jQuery toggle() is a special type of method which is used to toggle between the hide() and show() method. It shows the hidden elements and hides the shown element.

Syntax:

 
  1. $(selector).toggle();  
  2. $(selector).toggle(speed, callback);  
  3. $(selector).toggle(speed, easing, callback);  
  4. $(selector).toggle(display);  

speed: It is an optional parameter. It specifies the speed of the delay. Its possible vales are slow, fast and milliseconds.

easing: It specifies the easing function to be used for transition.

callback: It is also an optional parameter. It specifies the function to be called after completion of toggle() effect.

display: If true, it displays element. If false, it hides the element.

Let's take an example to see the jQuery toggle effect.

 
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>    
  5. <script>    
  6. $(document).ready(function(){    
  7.     $("button").click(function(){    
  8.         $("div.d1").toggle();    
  9.     });    
  10. });    
  11. </script>    
  12. </head>    
  13. <body>    
  14. <button>Toggle</button>    
  15. <div class="d1" style="border:1px solid black;padding:10px;width:250px">    
  16. <p><b>This is a little poem: </b><br/>      
  17. Twinkle, twinkle, little star<br/>      
  18. How I wonder what you are<br/>      
  19. Up above the world so high<br/>      
  20. Like a diamond in the sky<br/>      
  21. Twinkle, twinkle little star<br/>      
  22. How I wonder what you are</p>     
  23. </div>    
  24. </body>    
  25. </html>    

Test it Now

Output:

Toggle

This is a little poem: 
Twinkle, twinkle, little star
How I wonder what you are
Up above the world so high
Like a diamond in the sky
Twinkle, twinkle little star
How I wonder what you are

jQuery toggle() effect with speed parameter

Let's see the example of jQuery toggle effect with 1500 milliseconds speed.

  1. $(document).ready(function(){  
  2.      $("button").click(function(){  
  3.         $("div.d1").toggle(1500);  
  4.     });  
  5. });  

Test it Now