Slide upwards in jQuery using slideDown()

The first time you stumble upon it, it’s a bit confusing that the slideDown and slideUp functions in jQuery only allow you to slide an element downwards. However, we can use them to slide an element upwards with just a little bit of CSS and without adding any extra jQuery code.

Demo and description

Check the demo for the example that we will be following in this tutorial:

Slide upwards using slideDown function Demo

As we said, we won’t be using extra jQuery code, out of the slideUp and slideDown functions. Instead we will use CSS and we will slide down an element with absolute positioning, fixed to the bottom of a larger element:

The markup

In this case, our parent block will be .block and .slidemeup is the inner div that appears to slide upwards:

<div class="block">
<div class="slidemeup">
Tasty golden <a href="http://graphicriver.net/item/wooden-box-with-label-and-coins/233500">coins</a>

		<small>Get them on GraphicRiver</small></div>
</div>

Notice that you can place anything you want inside the block.

jQuery code

Nothing fancy here, we will just listen to the hover event in the parent item and slide down the inner div:

jQuery(document).ready(function(){
	jQuery(".block").hover(
		function(){
			jQuery(".slidemeup").slideDown();
		},
		function(){
		jQuery(".slidemeup").slideUp('fast');
	});
});

Styling and positioning

Finally, this is where we will do the magic to slide the div upwards. Here you will only find the properties for the layout, which is the interesting and important part:

.block {
	position: relative;
	width: 320px;
	height: 260px;
	display: block;
	margin: 0 auto;
	overflow: hidden;
}
.slidemeup{
	position: absolute;
	bottom: 10px;
	left: 10px;
	display: none;
	width: 260px;
	height: 40px;
	padding: 20px;
}

Notice that the parent block is given a relative positioning, allowing the inner item to be absolutely positioned having it as a reference for its local coordinates. Hence, bottom is not the bottom of the page but the bottom of the parent block.

This concludes the example. Feel free to download the source code and play around.

• WordPress drop down menus: highlight parent items with jQuery
• Preserving radio button checked state during drag and drop with jQuery
• jQuery plugin for better select boxes
• Multiple instances of jQuery Tabs
• WordPress 3.0 Menu Management UI

Tags: development, javascript, user interface. Categories: jQuery.
Wednesday, June 15th, 2011.