From jQuery JavaScript Library
« Back to Effects
slideToggle( speed, [callback] )
Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion.
Only the height is adjusted for this animation, causing all matched elements to be hidden or shown in a "sliding" manner.
Arguments:| speed | String, Number | |
|---|
| A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000). |
| callback (Optional) | Function | |
|---|
A function to be executed whenever the animation completes, executes once for each element animated against.
function callback() {
this; // dom element
}
|
Examples:| Name | Type |
|---|
Animates all paragraphs to slide up or down, completing the animation within 600 milliseconds.
$("button").click(function () {
$("p").slideToggle("slow");
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="../jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
$("p").slideToggle("slow");
});
});
</script>
<style>
p { width:400px; }
</style>
</head>
<body>
<button>Toggle</button>
<p>
This is the paragraph to end all paragraphs. You
should feel <em>lucky</em> to have seen such a paragraph in
your life. Congratulations!
</p>
</body>
</html>
Animates divs between dividers with a toggle that makes some appear and some disappear.
$("button").click(function () {
$("div:not(.still)").slideToggle("slow", function () {
var n = parseInt($("span").text(), 10);
$("span").text(n + 1);
});
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="../jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
$("div:not(.still)").slideToggle("slow", function () {
var n = parseInt($("span").text(), 10);
$("span").text(n + 1);
});
});
});
</script>
<style>
div { background:#b977d1; margin:3px; width:60px;
height:60px; float:left; }
div.still { background:#345; width:5px; }
div.hider { display:none; }
span { color:red; }
</style>
</head>
<body>
<button>Toggle</button> There have been <span>0</span> toggled divs.
<div></div><div class="still"></div>
<div style="display:none;"></div><div class="still"></div>
<div></div><div class="still"></div>
<div class="hider"></div><div class="still"></div>
<div class="hider"></div><div class="still"></div>
<div></div>
</body>
</html>