jQuery Toggle
jQuery Toggle() Method
The jQuery toggle() method toggles between hide() and show() for the selected elements. This method checks the selected elements for visibility. show() is run if an element is hidden.
Syntax
$(selector).toggle();
$(selector).toggle(speed, callback);
$(selector).toggle(speed, easing, callback);
$(selector).toggle(display); Here selector is the selected element. It accepts three parameters which are specified below:
-
speed -It specifies the speed of the toggle effect. Default value is 400 milliseconds. Possible values:
- milliseconds
- slow
- fast
-
easing - It specifies the speed of the element at different point of animation. Default value is swing. Possible values:
- swing - moves slower at the beginning/end, but faster in the middle
- linear - moves in a constant speed
-
callback - A function to be executed after the toggle() method is completed.
-
display - If true, it displays element. If false, it hides the element.
Let's take an example to see the jQuery toggle effect in simple way.
<!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.id").toggle();
});
});
</script>
</head>
<body>
<button>Toggle</button>
<div class="id" style="border:1px solid black; padding:20px; width:200px">
<p><b>Tutorialstrend.com</b></p>
</div>
</body>
</html> Output
This method checks the selected elements for visibility. show() is run if an element is hidden.
Now you click on the toggle button eill show and hide.
jQuery toggle() effect with speed parameter
Let's see the example of jQuery toggle effect with 1200 milliseconds speed.
$(document).ready(function(){
$("button").click(function(){
$("div.id").toggle(1200);
});
}); Prev Next