jQuery .slideToggle() method displays or hide the matched elements with a sliding motion
Syntax and Description
.slideToggle([duration][, callback])
displays or hide the matched elements with a sliding motion.
duration (optional)A string or number determining how long the animation will runcallback (optional)A function to call once the animation is complete
Its return value is the jQuery object, for chaining purposes.
Durations are given in milliseconds; higher values indicate slower animations. The 'fast' and 'slow' strings can be supplied to indicate durations of 200 and 600 milliseconds, respectively.
If supplied, the callback is fired once the animation is complete.
Slide animation
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from www . j a v a 2 s . c o m-->
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
});
</script>
<style>
div { background:yellow; width:80px; height:80px; margin:5px; float:left; }
</style>
</head>
<body>
<div></div>
<div id="mover"></div>
<div></div>
</body>
</html>
Slide toggle and function
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w w w.j a v a2 s. co m-->
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
});
</script>
<style>
div { background:yellow; width:80px; height:80px; margin:5px; float:left; }
</style>
</head>
<body>
<div></div>
<div id="mover"></div>
<div></div>
</body>
</html>
Slide toggle button
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w w w . ja va 2s. c om-->
$("button").click(function () {
$(this).slideToggle();
});
});
</script>
</head>
<body>
<body>
<div>Click me<button>button</button></div>
</body>
</html>
Slide toggle callback
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w w w . j a va 2 s . co m-->
$("button").click(function () {
$(this).slideToggle("slow",function () {
alert("done");
});
});
});
</script>
</head>
<body>
<body>
<div>Click me<button>button</button></div>
</body>
</html>
Fast slide toggle
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from w w w . ja va 2 s .c om-->
$("button").click(function () {
$(this).slideToggle("fast");
});
});
</script>
</head>
<body>
<body>
<div>Click me<button>button</button></div>
</body>
</html>
Slide toggle in milliseconds
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w w w. j ava2 s .c o m-->
$("button").click(function () {
$(this).slideToggle(2000);
});
});
</script>
</head>
<body>
<body>
<div>Click me<button>button</button></div>
</body>
</html>
Slide toggle slow
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- ww w . j av a 2 s . c o m-->
$("button").click(function () {
$(this).slideToggle("slow");
});
});
</script>
</head>
<body>
<body>
<div>Click me<button>button</button></div>
</body>
</html>