Google News
logo
jQuery Sliding Methods
The jQuery sliding methods is used to hide or show the HTML elements by gradually decreasing or increasing their height .

jQuery has the following slide methods :

  • slideDown()
  • slideUp()
  • slideToggle()
jQuery slideDown()

jQuery slideDown() method is used to slide down an element.

Syntax

$(selector).slideDown(speed,callback);

The jQuery slideDown() method is an optional speed parameter. It specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

It is also an optional callback parameter. It specifies the function to be executed after completion of slideDown() effect. The following example demonstrates the jQuery slideDown() method.

<!DOCTYPE html>
<html>
<head>
<title>jQuery slidedown()</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("#click_here").click(function(){
        $("#panel").slideDown("slow");
    });
});
</script>
 
<style type="text/css"> 
#panel, #click_here { 
padding:5px; 
text-align: center;  
background-color:#0099da; 
border:solid 1px #0099da; 
color:#FFF;
}
#panel{padding:30px; color:#000; display:none; background:#EEE;}
</style>
</head>
 
<body>
 
<a href="#" style="text-decoration:none;">
  <div id="click_here">Click Here! ( slideDown )</div>
</a>
<div id="panel">
Dummy Text : Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an 
unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
 
</body>
</html>
Output :
jQuery slideUp()

jQuery slideUp() method is used to slide up an element.

Syntax

$(selector).slideUp(speed,callback);

The jQuery slideUp() method is an optional speed parameter. It specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

It is also an optional callback parameter. It specifies the function to be executed after completion of slideUp() effect. The following example demonstrates the jQuery slideUp() method.

<!DOCTYPE html>
<html>
<head>
<title>jQuery slideUp()</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("#click_here").click(function(){
        $("#panel").slideUp("slow");
    });
});
</script>
 
<style type="text/css"> 
#panel, #click_here { 
padding:5px; 
text-align: center;  
background-color:#0099da; 
border:solid 1px #0099da; 
color:#FFF;
}
#panel{padding:30px; color:#000; background:#EEE;}
</style>
</head>
 
<body>
 
<a href="#" style="text-decoration:none;">
  <div id="click_here">Click Here! ( slideUp )</div>
</a>
<div id="panel">
Dummy Text : Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
 
</body>
</html>
Output :
jQuery slideToggle()

jQuery slideToggle() method is used to toggle between slideUp() and slideDown() method. If the element is slide down, it will slide up the element and if it is slide up, it will slide down.

Syntax

$(selector).slideToggle(speed,callback);

The jQuery slideToggle() is an optional speed parameter can take the following values: "slow", "fast", milliseconds.

It is also an optional callback parameter. It specifies the function to be executed after completion of slideToggle() effect. The following example demonstrates the slideToggle() method.

<!DOCTYPE html>
<html>
<head>
<title>jQuery slideToggle()</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("#click_here").click(function(){
        $("#panel").slideToggle("slow");
    });
});
</script>
 
<style type="text/css"> 
#panel, #click_here { 
padding:5px; 
text-align: center;  
background-color:#0099da; 
border:solid 1px #0099da; 
color:#FFF;
}
#panel{padding:30px; color:#000; display:none; background:#EEE;}
</style>
</head>
 
<body>
 
<a href="#" style="text-decoration:none;">
  <div id="click_here">Click Here! ( slideToggle )</div>
</a>
<div id="panel">
Dummy Text : Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
 
</body>
</html>
Output :