Description: Bind two or more handlers to the matched elements, to be executed on alternate clicks.
handler(eventObject)A function to execute every even time the element is clicked.
handler(eventObject)A function to execute every odd time the element is clicked.
handler(eventObject)Additional handlers to cycle through after clicks.
The .toggle()
method binds a handler for the click
event, so the rules outlined for the triggering of click
apply here as well.
For example, consider the HTML: <div id="target"> Click here </div>
Event handlers can then be bound to the <div>
:
$('#target').toggle(function() { alert('First handler for .toggle() called.'); }, function() { alert('Second handler for .toggle() called.'); });
As the element is clicked repeatedly, the messages alternate:
First handler for .toggle() called.
Second handler for .toggle() called.
First handler for .toggle() called.
Second handler for .toggle() called.
First handler for .toggle() called.
If more than two handlers are provided, .toggle()
will cycle among all of them. For example, if there are three handlers, then the first handler will be called on the first click, the fourth click, the seventh click, and so on.
The .toggle()
method is provided for convenience. It is relatively straightforward to implement the same behavior by hand, and this can be necessary if the assumptions built into .toggle()
prove limiting. For example, .toggle()
is not guaranteed to work correctly if applied twice to the same element. Since .toggle()
internally uses a click
handler to do its work, we must unbind click
to remove a behavior attached with .toggle()
, so other click
handlers can be caught in the crossfire. The implementation also calls .preventDefault()
on the event, so links will not be followed and buttons will not be clicked if .toggle()
has been called on the element.
<!DOCTYPE html>
<html>
<head>
<style>
ul { margin:10px; list-style:inside circle; font-weight:bold; }
li { cursor:pointer; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul>
<li>Go to the store</li>
<li>Pick up dinner</li>
<li>Debug crash</li>
<li>Take a jog</li>
</ul>
<script>
$("li").toggle(
function () {
$(this).css({"list-style-type":"disc", "color":"blue"});
},
function () {
$(this).css({"list-style-type":"disc", "color":"red"});
},
function () {
$(this).css({"list-style-type":"", "color":""});
}
);
</script>
</body>
</html>
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
Description: Display or hide the matched elements.
durationA string or number determining how long the animation will run.
callbackA function to call once the animation is complete.
showOrHideA Boolean indicating whether to show or hide the elements.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
<script>
$("button").click(function () {
$("p").toggle();
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
p { background:#dad;
font-weight:bold;
font-size:16px; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Toggle 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>
<script>
$("button").click(function () {
$("p").toggle("slow");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
<script>
var flip = 0;
$("button").click(function () {
$("p").toggle( flip++ % 2 == 0 );
});
</script>
</body>
</html>