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:

snippet

$(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.

snippet

<!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>

Output:

jQuery toggle() effect with speed parameter

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

snippet

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