jQuery/CSS Expandable Content

For a mockup I worked on this week, the client requested a list of 10 essential resources to be included at the top of the content sidebar.  Unfortunately, displaying all 10 tended to push down the other sidebar content so far that they fell far below the fold.  I came up with this quick jQuery/CSS solution to make elegant expandable content divs.

Here's what it looks like:

When you click the 'See More...' link, the div expands to reveal all the content.

Here's the jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>

<script type="text/javascript">
$(document).ready(function () {
	// content expander
	$('.expand').each(function(){
		$('<a class="expander">See More...</a>')
			.attr('href', '#' + $(this).attr('id'))
			.click(function(){ 
				$(this).parent().toggleClass("expand", 500); 
				$(this).hide();
				return false;
			})
			.appendTo($(this));
	});
});
</script>

Here's the CSS:

div.expand{
	height: 450px;	
	overflow: hidden;
	position: relative;
}
div.expand a.expander{
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	color: #666;
	padding: 30px 10px 5px 10px;
	text-align: right;
	font-size: 90%;
	background: url(../graphics/white-gradient-bottom.png) repeat-x left bottom;
}

All you need to do is add the class "expand" to your div, and voila! Instant expandable content!

Update: I've updated this code to be aware of divs that don't need to be expanded.