jQuery – Slide an Element

To set a sliding effect on HTML elements, jQuery provides the sliding effect. This is an effect that increases and decreases the height of an element with the click of a button. Let us see how to slide down and slide up elements. Also, set the toggle for the same.

jQuery Slide Down

To slide down an HTML element, use the slideDown() method in jQuery. In the below example, we will slide down the <div> element. Let us see an example:

Output

jQuery Slide Down an Element

jQuery Slide Up

To slide up an HTML element, use the slideUp() method in jQuery. In the below example, we will slide up the <div> element. Let us see an example:

Output

jQuery Slide Up an Element

jQuery Slide Toggle

Slide up and down elements if you set a toggle button. The jQuery slideToggle() method fulfills this purpose. You can easily toggle between the slideUp() and slideDown() methods using the slideToggle().

Slide up the elements if they are sliding down using the slideUp() method in jQuery. Slide down the elements if they are sliding up using the slideDown() method in jQuery.

Let us see an example wherein we will toggle (slide up/ down) with the click of a single button:

Output

jQuery Slide Toggle

jQuery - Fade an element
jQuery - Create Animations
Studyopedia Editorial Staff
contact@studyopedia.com

We work to create programming tutorials for all.

No Comments

Post A Comment

Discover more from Studyopedia

Subscribe now to keep reading and get access to the full archive.

Continue reading