Forgot password
Thank youThe jQuery slide methods is used for sliding elements up and down.
ExamplesslideDown() jQuery Method
Shows the jQuery slideDown() function.
slideUp() jQuery Method
Shows the jQuery slideUp() function
slideToggle() jQuery Method
Shows the jQuery slideToggle() function.Sliding Methods in jQuery
With jQuery you can make a sliding impact on components.
jQuery has the accompanying slide strategies:
1-slideDown()
2-slideUp()
3-slideToggle()
The slideDown() method in jQuery is used for slide down an element.
Syntax:
$(selector).slideDown(speed,cllback);
The discretionary speed parameter determines the term of the impact. It can take the accompanying qualities: "slow", "fast", or milliseconds.
The discretionary callback parameter is a capacity to be executed after the sliding finishes.
The following example shows how slideDown() method works:
<html><head>
<script src="jquery/3.3.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("#flipDown").click(function(){
$("#panelDown").slideDown("slow");
});
});
</script>
<style>
#flipDown, #panelDown {
padding: 10px;
text-align: center;
background-color:#93ce7f;
border: solid 1px #4d4d4d;
} #panelDown {
padding: 70px;
display: none;
}
</style>
</head>
<body>
<div id="flipDown" >Click here to slide down </div>
<div id="panelDown" >Hello world! </div> </body>
</html>
The slideUp() method in jQuery is used for slide up the element.
$(selector).slideUp(speed,callback);
The discretionary speed parameter determines the term of the impact. It can take the accompanying qualities: "slow", "fast", or milliseconds.
The discretionary callback parameter is a capacity to be executed after the sliding finishes.
The following example shows how slideUp() method works:
<html><head>
<script src="jquery/3.3.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("#flipUp").click(function(){
$("#panelUp").slideUp("slow");
});
});
</script>
<style>
#panelUp, #flipUp {
padding: 10px;
text-align: center;
background-color:#93ce7f;
border: solid 1px #4d4d4d;
} #panelUp {
padding: 70px;
}
</style>
</head>
<body>
<div id="flipUp">Click here to slide up </div>
<div id="panelUp">Hello world! </div> </body>
</html>
The slideToogle() jQuery method toggles between the slideDown() and slideUp jQuery methods.
If the elements are slid down,slideToggle() will slide them up.
If the elements are slid up, slideToggle() will slide them down.
$(selector).slideToggle(speed,callback);
The discretionary speed parameter determines the term of the impact. It can take the accompanying qualities: "slow", "fast", or milliseconds.
The discretionary callback parameter is a capacity to be executed after the sliding finishes.
The following example shows how slideToggle() method works:
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("#flipToggle").click(function(){
$("#panelToggle").slideToggle("slow");
});
});
</script> <style>
#panelToggle, #flipToggle {
padding: 10px;
text-align: center;
background-color:#93ce7f;
border: solid 1px #4d4d4d;
} #panelToggle {
padding: 70px;
display: none;
}
</style>
</head>
<body>
<div id="flipToggle">Click here to slide down or up </div>
<div id="panelToggle">Hello world! </div> </body>
</html>
