In this example, we’ll be considering three popular jQuery methods .slideUp, .slideDown, .slideToggle.
For your basic understanding, know that slideUp hides the matched elements with a sliding motion, slideDown displays the matched elements with a sliding motion, while slideToggle will toggle between the two states, meaning it will display or hide the matched elements with a sliding motion.
The methods are mainly used for animations and do not affect the actual page layout, which means that you may use them regardless of how elements are arranged on a webpage.
It is also used for other show/hide functionality like displaying an error message when an input is incorrect.
1. Document Setup
To begin, create a new HTML document and add the following basic syntax inside:
<!DOCTYPE html> <html> <head> <title>jQuery SlideUp/Down/Toggle Example</title> </head> <body> <!-- HTML SECTION --> <!-- JAVASCRIPT SECTION --> <script src="jquery-1.11.3.min.js"></script> <script type="text/javascript"> </script> </body> </html>
Note that the jQuery Library is linked locally. If you don’t have it, please download here.
2. Specifications & Examples
For each of the methods, we’re giving some more information and each example will consist of a button and a paragraph which will be hidden or shown or toggled depending on the case.
2.1 slideUp Method
The syntax for this method is: $(selector).slideUp(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take the following values: “slow”, “fast”, or milliseconds. The optional callback parameter is a function to be executed after the sliding completes.
To apply the method, first add the following elements in HTML:
<!-- HTML SECTION --> <p>Lorem ipsum dolor sit amet!</p> <button>Hide (Slide Up)</button>
Now in jQuery, just after the button click, we select the p element and hide it (slide it up).
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$('p').slideUp();
});
});
</script>
This is how the paragraph slides up in the browser:
2.2 slideDown Method
The syntax for this method is: $(selector).slideDown(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take the following values: “slow”, “fast”, or milliseconds. The optional callback parameter is a function to be executed after the sliding completes.
To apply the method, first add the following elements in HTML:
<!-- HTML SECTION --> <p style="display:none;">Lorem ipsum dolor sit amet!</p> <button>Show (Slide Up)</button>
Note that the paragraph in this case needs not to be displayed so that we can do show it with the method. We achieve this by giving the para a css property: display: none;
Now in jQuery, just after the button click, we select the p element and hide it (slide it up).
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$('p').slideDown();
});
});
</script>
This is how the paragraph slides down in the browser:
2.3 slideToggle Method
The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods. If the elements have been slid down, slideToggle() will slide them up. If the elements have been slid up, slideToggle() will slide them down.
The syntax for this method is: $(selector).slideToggle(speed,callback);
The optional speed parameter can take the following values: “slow”, “fast”, milliseconds. The optional callback parameter is a function to be executed after the sliding completes.
To apply the method, first add the following elements in HTML:
<!-- HTML SECTION --> <p>Lorem ipsum dolor sit amet!</p> <button>Toggle Slide State</button>
Note that the paragraph in this case needs not to be displayed so that we can do show it with the method. We achieve this by giving the para a css property: display: none;
Now in jQuery, just after the button click, we select the p element and hide it (slide it up).
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$('p').slideToggle();
});
});
</script>
This is how the paragraph toggles between the two states of slide in the browser:
3. Extending Basic Functionality
Let’s now use the speed parameter and a callback function just to give you an idea of how you can use these. Add the following two elements in HTML:
<!-- HTML SECTION --> <p>Lorem ipsum dolor sit amet!</p> <button>Click Me</button>
In the JS section, let’s give the sliding a duration of 1000ms and a function which will just alert a message of our choice.
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$('p').slideUp(1000, function(){
alert("Slide Up Completed!")
});
});
});
</script>
The same goes for either slideDown or slideToggle, so we’re just going to demonstrate one of the methods:
4. Conclusion
To conclude, jQuery provides three methods for hiding and showing content using a smooth and soft animation. In a way, it is a substitution for the manual hiding and showing content via the hide() and show() methods (even though not exactly) which just had the functionality with no animation at all.
To get more information on these methods, do refer the the official jQuery website and get familiar with the options if you intend to use it in a more professional manner.
5. Download
You can download the full source code of this example here: jQuery SlideToggle
