jQuery toggle()

by Online Tutorials Library July 14, 2022

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:

 $(selector).toggle(); $(selector).toggle(speed, callback); $(selector).toggle(speed, easing, callback); $(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.

 <!DOCTYPE html>   <html>   <head>   <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>   <script>   $(document).ready(function(){       $(“button”).click(function(){           $(“div.d1″).toggle();       });   });   </script>   </head>   <body>   <button>Toggle</button>   <div class=”d1″ style=”border:1px solid black;padding:10px;width:250px”>   <p><b>This is a little poem: </b><br/>     Twinkle, twinkle, little star<br/>     How I wonder what you are<br/>     Up above the world so high<br/>     Like a diamond in the sky<br/>     Twinkle, twinkle little star<br/>     How I wonder what you are</p>    </div>   </body>   </html>   

Test it Now

Output:

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.

 $(document).ready(function(){      $("button").click(function(){         $("div.d1").toggle(1500);     }); }); 

Test it Now

Next TopicjQuery fadein()

jQuery toggle()

jQuery toggle()

jQuery toggle() effect with speed parameter

jQuery submit()

Facelets Templates

You may also like