How to Slidedown Div Content on Button Click Using jQuery

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

Output

This is the div content to show the jQuery slidedown method.


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

Output

This is the div content to show the jQuery slide down method.


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