Last Updated on September 3, 2022 by Roshan Parihar
Learn how to slideup div content on button click using jQuery. You have to use the slideUp() function to apply the slide-up effect to the div element.
The slide-up method is to hide the content with a sliding effect in jQuery. This is the animation effect that you can apply using jQuery.
Slideup Div Content On Button Click Using jQuery
The below example shows the button with the content inside the div element to display the slide-up method effect. You can also pass the speed of the slide-up effect by giving the speed as an argument of the slideUp() function.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('#btn-slideup').click(function(){ $("#div-slideup").slideUp(); }); }); </script> <div id="div-slideup">This is the div content to show the jQuery slideup method.</div> <button id="btn-slideup" class="btn btn-primary" type="button">Click to Slideup</button> |
Output
Click the button given above to slightly hide the div content with the sliding effect. The slideup means to hide the content with the sliding effect
If you want to perform the slideup effect with the specified speed, you have to pass the speed in a millisecond as the argument of slideUp(). Keep reading this post to find the example below with the speed of the slideup effect.
jQuery Slide up Div Content with Speed
The speed of the slideup effect when provide can make the sliding effect slow or fast. If you want to give the speed of second, you have to pass speed in milliseconds as the argument of the slideUp(). For 5 seconds speed, you have to pass 5000 as an argument.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('#btn-slideupspeed').click(function(){ $("#div-slideupspeed").slideUp(5000); }); }); </script> <div id="div-slideupspeed">This is the div content to show the jQuery slideup method.</div> <button id="btn-slideupspeed" class="btn btn-primary" type="button">Slideup in 5sec</button> |
Output
Check the speed of the slideup effect by clicking on the button given above. If you want to learn more about the sliding effect, you can visit our page.
You May Also Like to Read