JQuery slide function


slideDown method in JQuery

slideDown() method in JQuery is used to add sliding effect to the mentioned data.In slide down after clicking pointed portion required portion is slided down.
<!DOCTYPE html>
<html>
<head>
<style>
#first, #demo {
padding: 5px;
text-align: center;
background-color: dimgray;
border: solid 1px #c3c3c3;
}
#demo {
padding: 50px;
display: none;
}
</style>
<title>
JAVASCRIPT
</title>
</head>
<body>
<div id="first">
Click to see demo.
</div>
<div id="demo">
This is demo.
</div>
<script>
$(document).ready(function(){
$("#first").click(function(){
$("#demo").slideDown("slow");
});
});
</script>
</body>
</html>

Output:

Click to see demo.
This is demo.

slideUp method in JQuery is used to slide up and hide the desired HTML element when mentioned element is clicked.

slideUp() method in JQueyr
<!DOCTYPE html>
<html>
<head>
<style>
#first, #demo {
padding: 5px;
text-align: center;
background-color: dimgray;
border: solid 1px #c3c3c3;
}
#demo {
padding: 50px;
}
</style>
<title>
JAVASCRIPT
</title>
</head>
<body>
<div id="first">
Click to see demo.
</div>
<div id="demo">
This is demo.
</div>
<script>
$(document).ready(function(){
$("#first").click(function(){
$("#demo").slideUp("slow");
});
});
</script>
</body>
</html>

Output:

Click to see demo.
This is demo.

Toggling between slideUp and slideDown

One can toggle between slideUp() and slideDown() method in JQuery using slideToggle() method.When first time element is clicked then HTML element appears and when same element is clicked again then appeared element is hidden as previous.
<!DOCTYPE html>
<html>
<head>
<style>
#first, #demo {
padding: 5px;
text-align: center;
background-color: dimgray;
border: solid 1px #c3c3c3;
}
#demo {
padding: 50px;
display:none;
}
</style>
<title>
JAVASCRIPT
</title>
</head>
<body>
<div id="first">
Click to see demo.
</div>
<div id="demo">
This is demo.
</div>
<script>
$(document).ready(function(){
$("#first").click(function(){
$("#demo").slideToggle("slow");
});
});
</script>
</body>
</html>

Output:

Click to see demo.
This is demo.