jQuery slideUp and slideDown

.slideUp()

.slideDown()

Here is a beginner tutorial on using the jQuery slideUp() and slideDown() functions. This article contains the code used to perform the jQuery slide functionality. Watch the video to be shown from beginning to end, just how easy it is to implement the jQuery slideUp and slideDown functions.

To use the slideUp and slideDown functions on an object, the code looks as follows:

$('#id').slideUp();
 
$('#id').slideDown();

If you were to perform the slideUp and slideDown functions inside of a button click event, the javascript code would look as follows:

$(document).ready(function(){
 
      $('#button').click(function(){
            $('#object').slideUp();
      });
 
});

The following is a quick beginner video tutorial on using the slideUp() and slideDown() functionality.

You can view a live demo of this functionality by clicking below:

DEMO

The code from the video is displayed below:

 
<html>
<head>
<title>jQuery slideUp and slideDown</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
 
<script type="text/javascript">
 
$(document).ready(function(){
	$('#up-button').click(function(){
		$('#box').slideUp();
	});
 
	$('#down-button').click(function(){
		$('#box').slideDown();
	});
});
 
</script>
 
</head>
 
 
<body>
 
<input type="button" value="Slide Up" id="up-button" />
<input type="button" value="Slide Down" id="down-button" />
 
<div id="box" style="display:block; background:#ccc; width:350px; height:150px;"></div>
 
</body>
 
</html>

This was just a simple example of how to use the jQuery slideUp and slideDown functionality.

Advanced slideUp and slideDown: There is also a way to add certain types of effects or easing to the slideUp and slideDown animations. Additionally you can run some more code in a function once the animation has been completed. A quick representation is shown below:

$('#button').click(function() {
      $('#id').slideUp('slow', function() {
           // the animation is completed... run code
      });
});

In the above example, you can specify whether you would like the slide animation to run ‘slow’ or ‘fast’. There are also several other effects and easing that can be used, but we will not explain that here just yet. You can also see that above you can insert java-script code to run after the animation has completed.

  • http://www.devcurry.com Suprotim Agarwal

    Good job Tony. I like the idea of adding a video along with the demo. Why $(‘#object’)? For better readibility and ease of access, I prefer adding a class to my elements and refering them with the class name.

  • http://www.tonylea.com admin

    Hi Suprotim,

    I just decided to use the $(‘#object’) instead of $(‘.class’); however, maybe I’ll use the class reference in my future tutorials. Thanks for the comment and the advice :)

  • Tim

    This so simple and nice, I love it. Great job.

  • http://www.ihlassaglikrobotu.com İhlas Temizlik Robotu

    Thanks Good Article ;)

  • Dee

    How do I set a variable object if I have more than one area of content to slide up / slide down on the same page? How do I name the divs and how do I set the object so that I only need the jquery code once?