JQuery Sliding Effect Using SlideUp And SlideDown

What Will I Learn?
A. jQuery Sliding Effect Using slideUp()
B. jQuery Sliding Effect Using slideToggle()
C. jQuery slideUp() slideDown() slideToggle()

Requirements

Basic knowledge about HTML.
Basic knowledge about CSS.
Basic knowledge about Jquery.

Difficulty
Basic

If you want to use jQuery Sliding Effect, jQuery comes with few handy methods to use. These methods are given below to perform jQuery slide up and slide down.

• slideUp()
• slideDown()
• slideToggle()
  Now let’s start learning out each one of them to understand how to use jQuery sliding effect using slide up, slide down and slidetoggle effects using the jQuery methods on page load.

jQuery Sliding Effect Using slideUp()

jQuery slide up method gives the sliding effect to an HTML element by decreasing the height of it. This effect hides the HTML element by slowly decreasing the height and applying the display none CSS property.

The syntax of slide up method is given below.

Syntax of slideUp()

$(selector).slideUp(speed,callback)

The syntax of slide up method contains three parameters selectors, speed, and callback. The ‘selector’ is the required field and the last two parameters speed and callback you can use optionally.

1.) selector
If you want to apply jQuery sliding effect, you need to first access the HTML by using the selector parameter. This is the required parameter.

2.) speed
The optional parameter ‘speed’ controls the speed of decreasing the height of the HTML element on slide up effect. The possible values are ‘slow’, ‘fast’ or value in milliseconds.

3.) callback
The optional parameter callback is the function you can use to execute after the occurrence of the slide up effect.

Example of slideUp()

<script>
$(document).ready(function(){
    $("#btn-slideup").click(function(){
        $("#para-slideup").slideUp();
    });
});
</script>
<p id="para-slideup">This is the paragraph to show slide up effect.</p>
<button id="btn-slideup">Click me to slide up</button>

jQuery Sliding Effect Using slideDown()

The slideDown() method can be used to slide down the HTML element. The jQuery slideDown method means to display the the HTML element by increasing the height of the element.

The syntax of jQuery slide down method is given below.

$(selector).slideDown(speed,callback)

The syntax of jQuery slideDown() method contains the three parameters selectors, speed, and callback. Check the below table to see the details about these parameters.

1.) selector
Before applying the effect you need to know first how to access it. You can use the required parameter selector to access and apply the required effect.

2.) speed
The jQuery slide down method has ‘speed’ optional parameter to give the speed of the slide down element. The possible values for speed parameter can be ‘slow’, ‘fast’ or value in milliseconds.

3.) callback
The callback is the optional parameter which uses a function to execute after the occurrence of the slide down method.

Example of jQuery slideDown()

<script>
$(document).ready(function(){
    $("#btn-slidedown").click(function(){
        $("#para-slidedown").slideDown();
    });
});
</script>
<p id="para-slidedown" style="display: none;">This is the paragraph to show slideDown effect.</p>
<button id="btn-slidedown">Click me to slide down</button>

jQuery Sliding Effect Using slideToggle()

You can perform jQuery slide down and slide up effect using the single slideToggle(). The slideToggle() increasing the height of the element when the element is in hidden state and decrease the height when the element is in displayed state.

The syntax of the jQuery slide Toggle method is given below.
Syntax of slideToggle()

$(selector).slideToggle(speed,callback)

The syntax of jQuery slideToggle() contains the three parameters selectors, speed, and callback as you learned for slide up and slide down methods.See the details about each parameter one by one.

1.) selector
This is the required parameter to use. The selector parameter applies the required jQuery slide toggle method by accessing the HTML element.

2.) speed
This is the optional parameter. You have to provide the speed of both the slide up and slide down feature performed by the single slidetoggle method. The possible values for this can be ‘slow’, ‘fast’ or value in milliseconds.

3.) callback
The callback is the optional parameter. In this parameter, you can give a function to execute the slide up and slide down effects occur.

Example of slideToggle()

<script>
$(document).ready(function(){
    $("#btn-slidetoggle").click(function(){
        $("#para-slidetoggle").slideToggle();
    });
});
</script>
<p id="para-slidetoggle">This is the paragraph to show slide toggle effect.</p>
<button id="btn-slidetoggle">Click me to slide toggle</button>

---

Posted on Utopian.io - Rewarding Open Source Contributors

---