I tried it too and it didn't work...
So I wrote this:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!--jQuery 1.3-->
<script src="js/jquery/jquery-1.3.min.js" type="text/javascript"></script>
<!--jQuery UI 1.6rc4-->
<script src="js/jquery/jquery-ui-1.6rc4.min.js" type="text/javascript"></script>
<style>
div#box-container {
overflow:hidden;
}
div#box {
position:relative;
background:red;
}
</style>
<script>
$(function() {
$("#hideLink").click(function(event) {
event.preventDefault();
// Get our elements
myBox = $("#box");
myBoxContainer = $("#box-container");
// If shown
if(myBox.hasClass("visible")) {
// Change 'top' of inner DIV to height of outer DIV
myBox.animate({
top:myBoxContainer.height()
},1000,function() {
// Change Height of outer DIV to 0px
myBoxContainer.animate({
height:'0px'
},1000);
});
// Change Link Text
$(this).html("Show Box");
// Set the class to hidden for the toggle
myBox.attr("class","hidden");
} else {
// Change outer DIV height to height of inner DIV
myBoxContainer.animate({
height:myBox.height()
},1000,function() {
// Change 'top' of inner DIV to 0px
myBox.animate({
top:'0px'
},1000);
});
// Change Link Text
$(this).html("Hide Box");
// Set the class to visible for the toggle
myBox.attr("class","visible");
}
});
});
</script>
</head>
<body>
<div id="box-container">
<div id="box" class="visible">
This is some text<br/>
This is some text<br/>
This is some text<br/>
This is some text<br/>
This is some text<br/>
This is some text<br/>
This is some text<br/>
</div>
</div>
<a id="hideLink" href="#">Hide Box</a>
</body>
</html>
Might not be exactly what you are looking for, but at least it gives you a starting point!
Before you post, read our: 
