jQuery provides three useful sliding effect methods – slideUp, slideDown and slideToggle. We can use these methods to show and hide an HTML DOM element with sliding effect.
jQuery slide
We will look at different jQuery sliding methods with examples.
- jQuery slideDown(): jQuery slideDown() method is used to show the hidden HTML element where it looks like the content is getting shown by sliding down.
- jQuery slideUp(): jQuery slideUp() method is used to hide the HTML element where it looks like the content is getting hidden by sliding up.
- jQuery slideToggle(): jQuery slideToggle() method is used to toggle the HTML element with sliding hide and show effects. If the element is hidden, then it will show the element like slideDown() method. For visible elements, it will work as slideUp() method.
Let’s look at all these jQuery slide methods with example programs.
jQuery slideDown
jQuery slideDown() method is used for the downward sliding transition of the selected html elements. The height attribute of the selected element is animated which makes the lower parts of the elements to reveal with a sliding effect. The parameters passed in the slideDown() method determines the behaviour of this effect.
Here is the general syntaxes for using slideDown() method.
- slideDown(duration);
- slideDown(duration, callBackfunction);
- slideDown(speed, easing, callBackfunction);
- slideDown(options);
duration: The values of the duration are specified in milliseconds. We can also give string values like “slow” and “fast”. Default duration is 400 milliseconds.
callBackfunction: This function is fired after the completion of sliding transition.
easing: This parameter determines which easing function like “swing” or “linear” is used for transition. “swing” is the default value.
options: This could be anything like duration, callBackfunction, easing, special easing etc.
jQuery slideDown Example
The following example demonstrates the slideDown() method. In this example, slideDown() method takes two parameters; duration with value “slow” and a call back function. When you run this demo, you can see the call back function fires after the sliding effect.
jQuery-slideDown.html
<!DOCTYPE html>
<html>
<head>
<title>jQuery Slide Down</title>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$(".divClass").slideDown("slow",function ()
{
$("#textMsg").text("Slide Down completed.");
});
});
});
</script>
<style>
.divClass
{
padding:5px;
text-align:center;
background-color:green;
border:solid 1px;
}
.divClass
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<button id="btn1">Click Me to slide down</button>
<div class="divClass"><b>JournalDev</b> <br><br>jQuery SlideDown</div>
<div id="textMsg"></div>
</body>
</html>
You might have met with the slide down effects in many web pages. This is how we accomplish the slide down effect in jQuery. The parameters passed to this method is similar to the jQuery hide() and show() method. Below is the output produced by above jQuery slideDown example.
jQuery slideUp
jQuery slideUp method is used for the upward sliding transition of the selected html elements. The height attribute of the selected element is animated which makes the lower parts of the elements to conceal with a sliding effect. The parameters passed in the slideUp() method determines the behaviour of this effect.
Here is the general syntaxes for using slideUp() method.
- slideUp (duration);
- slideUp (duration,callBackfunction);
- slideUp (speed,easing,callbackMethod);
- slideUp (options);
duration: The values of the duration are specified in milliseconds. We can also give string values like “slow” and “fast“. Default duration is 400 milliseconds.
callBackfunction: This function is fired after the completion of sliding transition.
easing: This parameter determines which easing function like “swing” or “linear” is used for transition. “swing” is the default value.
options: This could be anything like duration, callBackfunction, easing, special easing etc.
jQuery slideUp Example
The following example demonstrates the slideUp() method. In this example, slideUp() method takes two parameters; duration with value “slow” and a call back function. When you run this demo, you can see the call back function fires after the sliding effect.
jQuery-slideUp.html
<!DOCTYPE html>
<html>
<head>
<title>jQuery Slide Up</title>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$(".divClass").slideUp("slow",function()
{
$("#textMsg").text("Slide Up completed.");
});
});
});
</script>
<style>
.divClass
{
margin-top:20px;
padding:10px;
text-align:center;
background-color:green;
border:solid 1px;
height:200px;
width: 300px;
}
</style>
</head>
<body>
<button id="btn1">Click Me to slide up</button>
<div class="divClass"><br><b>JournalDev</b> <br><br>jQuery SlideUp</div>
<div id="textMsg"></div>
</body>
</html>
This is how we accomplish the sliding up effect in jQuery. The parameters passed to this method is similar to the jQuery hide() and show() method. This will be a handy method while designing web pages.
jQuery slideToggle
jQuery slideToggle method is used to hide or display the selected html elements. The height attribute of the selected element is animated which makes the lower parts of the elements to reveal or conceal with a sliding transition. The slideToggle() method checks the visibility of the selected element first. If the element is visible then it will trigger the slideUp() method else it triggers slideDown() method.
Here is the general syntaxes for using slideToggle method.
- slideToggle (duration);
- slideToggle (duration,callBackfunction);
- slideToggle (speed,easing,callbackMethod);
- slideToggle (options);
duration: The values of the duration are specified in milliseconds. We can also give string values like “slow” and “fast”. Default duration is 400 milliseconds.
callBackfunction: This function is fired after the completion of sliding transition.
easing: This parameter determines which easing function like “swing” or “linear” is used for transition. “swing” is the default value.
options: This could be anything like duration, callBackfunction, easing, special easing etc.
jQuery slideToggle Example
The following example demonstrates the slideToggle() method. In this example, slideToggle() method takes two parameters; duration with value “slow” and a call back function. When you run this demo, you can see the call back function triggers after the sliding effect.
jQuery-slideToggle.html
<!DOCTYPE html>
<html>
<head>
<title>jQuery Slide Toggle</title>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$(".divClass").slideToggle("slow",function()
{
alert("Slide Toggle Method completed.");
});
});
});
</script>
<style>
.divClass
{
margin-top:20px;
padding:10px;
text-align:center;
background-color:green;
border:solid 1px;
height:200px;
width: 300px;
}
</style>
</head>
<body>
<button id="btn1">Click Me to slide Toggle</button>
<div class="divClass"><br><b>JournalDev</b> <br><br>jQuery SlideToggle</div>
<div id="textMsg"></div>
</body>
</html>
This is how we toggle between hide and display of the html elements with a sliding transition. The parameters passed in the slideToggle() method is similar to slideUp() and slideDown() methods.
jQuery slideDown, slideUp and slideToggle Demo
You can use below links to see jQuery slide up, slide down and slide toggle effects in action.
- jQuery slideDown() Demo
- jQuery slideUp() Demo
- jQuery slideToggle() Demo
That’s all for jQuery sliding effects for showing and hiding DOM elements, we will be looking into more jQuery effects in future posts.