jQuery slideToggle() Effect
The jQuery slideToggle() method is used to toggle between the slideDown() and slideUp() methods.
Syntax of slideToggle() effect
$(selector).slideToggle(speed, easing, callback) The selector is the element on which slideToggle effect occurs. The optional speed parameter specifies either in milliseconds or a few predefined strings, slow and fast. The by default speed is 400 milliseconds. The easing parameter specifies the speed that the sliding should run at different points while sliding. jQuery supports two easing methods: linear and swing. The callback function is called after the sliding completes.
Example - slideToggle with slow speed
<style>
.demobox {
width: 200px;
height: 150px;
background-color: #CCFFFF;
border: 4px solid black;
padding: 20px;
}
</style>
<div id="demo" class="demobox"> Hello World!</div>
<button id="btn">Start Sliding</button>
<script>
$(document).ready(function(){
$("button#btn").click(function() {
$("div#demo").slideToggle('slow');
});
});
</script>Output of the above code
In the above example, when the user click on the 'Start Sliding' button, the div box of 'demo' id gets slide up or down.
Example - slideToggle with time and linear easing
<style>
.demobox {
width: 200px;
height: 150px;
background-color: #99FF99;
border: 4px solid black;
padding: 20px;
}
</style>
<div id="demo1" class="demobox"> Hello World!</div>
<button id="btn1">Start Sliding</button>
<script>
$(document).ready(function(){
$("button#btn1").click(function() {
$("div#demo1").slideToggle(800, "linear");
});
});
</script>Output of the above code
In the above example, when the user click on the 'Start Sliding' button, the div box of 'demo1' id get slided up and down according to the given sliding speed and linear easing.
Example - slideToggle with time, swing easing and callback function
<style>
.demobox {
width: 200px;
height: 150px;
background-color: #E5CCFF;
border: 4px solid black;
padding: 20px;
}
</style>
<div id="demo2" class="demobox"> Hello World!</div>
<button id="btn2">Start Sliding</button>
<script>
$(document).ready(function(){
$("button#btn2").click(function() {
$("div#demo2").slideToggle(1000, "swing" , function(){
alert("The box has beed slide toggled.");
});
});
</script>Output of the above code
In the above example, when the user click on the 'Start Sliding' button, the div box of 'demo2' id first gets slide up and on second click it gets slide down and continuously on click it toggles between slideUp and slideDown.
