How to use toggle() Method Event in JQuery
This article describe about jQuery Event toggle() Method.
toggle() Method Event in jQuery
Two or more event handler functions bind by the toggle() method to toggle between for the click event for selected elements.
The toggle between hide() and show() for the selected elements this method can also be used.
Example
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("p").toggle(function () {
$("body").css("background-color", "Blue");
},
function () {
$("body").css("background-color", "Gray");
},
function () {
$("body").css("background-color", "Red");
}
);
});
</script>
</head>
<body>
<p>Click on this paragraph to toggle between different background colors</p>
</body>
</html>
|
Output
Note: After click on the above output paragraph background changed.
Bind Two or More Functions to a Toggle Event
When specific element is clicked then toggle between two or more method.
Syntax
$(selector).toggle(function(),function(),function(),...)
|
Toggle Between Hide() and Show()
When any element is hidden then run show() method to visible. And if element is visible then hide() method run for invisible.
Syntax
$(selector).toggle(speed,callback)
|
Parameter |
Description |
Speed |
Optional. It define the speed of hide/show effect.
Possible values:
- milliseconds (like 1200)
- "slow"
- "normal"
- "fast"
|
callback |
Optional. function to execute after the toggle method complete. |
Show and Hide Element
Define weather the ONLY show or ONLY hide all matched elements.
Syntax
$(selector).toggle(switch)
|
You may also want to read these related articles Click here
Ask Your Question
Got a programming related question? You may want to post your question here
Programming Answers here