jQuery Sliding Effects

Using jQuery you can slide html element up and down. We can use the following methods to hide and show an HTML element with sliding effect .
  1. slideDown()
  2. slideUp()
  3. slideToggle()

jQuery slideDown()

Syntax
$(selector).slideDown(duration,callback);
jQuery slideDown() method is used to show the hidden HTML element where it looks like the content is getting shown by sliding down.
$("#slide").slideDown("slow");
<div id="slide"> Slide Down Demo </div>
run this source code Browser View
Slide Down Demo


Full Source
<html> <head> <title>jQuery Sliding</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("button").click(function(){ $("#slide").slideDown("slow"); }); }); </script> <style type="text/css"> div{ padding: 25px; background: red; width:25%; } div{ display: none; height: 50px; } </style> </head> <body> <button>Slide Down</button> <br><br> <div id="slide"> Slide Down Demo </div> </body> </html>

jQuery slideUp()

Syntax
$(selector).slideUp(duration,callback);
jQuery slideUp() method is used to hide the HTML element where it looks like the content is getting hidden by sliding up .
$("#slide").slideUp("slow");
<div id="slide"> Slide Up Demo </div>
run this source code Browser View
Slide Up Demo


Full Source
<html> <head> <title>jQuery Slide Up</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("button").click(function(){ $("#slide").slideUp("slow"); }); }); </script> <style type="text/css"> div{ padding: 25px; background: red; width:25%; } div{ height: 50px; } </style> </head> <body> <button>Slide Up</button> <div id="slide"> Slide Up Demo </div> </body> </html>

jQuery slideToggle()

Syntax
$(selector).slideToggle(duration,callback);
The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods.
$("#slide").slideToggle("slow");
<div id="slide"> Slide Toggle Demo </div>
run this source code Browser View
Slide Toggle Demo


Full Source
<html> <head> <title>jQuery Slide Toggle</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("button").click(function(){ $("#slide").slideToggle("slow"); }); }); </script> <style type="text/css"> div{ padding: 25px; background: red; width:10%; } div{ height: 50px; } </style> </head> <body> <button>Slide Toggle</button> <div id="slide"> Slide Toggle Demo </div> </body> </html>