Last Updated on September 2, 2022 by Roshan Parihar
Learn how to slidedown div content on button click using jQuery. The jquery slidedown() method applies the slide-down effect to div content and displays hidden elements.
The sliding effect displays the hidden div element with the click of a button. This is the sliding effect that displays the element slightly slow.
Slidedown Div Content On Button Click Using jQuery
The below example contains the button element using the <button> tag and the content inside the div element to display the example of slide down method effect.
Slidedown Div Content on button click
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> #div-slidedown{ display:none; } </style> <script> $(document).ready(function(){ $('#btn-slidedown').click(function(){ $("#div-slidedown").slideDown(); }); }); </script> <div id="div-slidedown">This is the div content to show the jQuery slidedown method.</div> <button id="btn-slidedown" class="btn btn-primary" type="button">Click to Slide down</button> |
Output
You can click the above button to see the slide down effect and slightly display the hidden div content. The slidedown means to display the hidden content with the sliding effect
The speed of the slidedown method can be controlled by specifying speed, you have to pass the speed in a millisecond as the argument of slideDown(). If you want to see the example with the speed argument, then keep reading this post.
jQuery Slide Down with Speed of 5 Second
If you want to give the speed of the slidedown effect, you can give the speed argument of the slideDown(). Let’s now give the speed of 5 seconds to the slide down effect with the example given below.
Slideup Div Content With Speed of 5 second
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> #div-slidedownspeed{ display:none; } </style> <script> $(document).ready(function(){ $('#btn-slidedownspeed').click(function(){ $("#div-slidedownspeed").slideDown(5000); }); }); </script> <div id="div-slidedownspeed">This is the div content to show the jQuery slide down method.</div> <button id="btn-slidedownspeed" class="btn btn-primary" type="button">Slide down in 5sec</button> |
Output
Now, you can check the speed of the slide-down effect by clicking on the above-given button given.
You May Also Like to Read