Nested divs, showing one at a time

Hello, I'm trying to have a container div, that fills its position 100% in height (its inside a table cell, after the page header and before the page footer).
Inside that div, I'll have 3 divs, that fill up that container div, but one at a time. I don't want to switch the display (visible to none) because I want all of them there to later play (with jquery) with the transition between them...

What I tried below, doesn't seem to work... (the top position idea is to later do a jquery onclick effect to transition from one div to another)

What would the best approach for this be?
Thanks!

<style type="text/css" media="screen">

#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
}
#div-1b {
position:absolute;
top:100%;
right:0;
width:100%;
height:100%;
}
#div-1c {
position:absolute;
top:200%;
right:0;
width:100%;
height:100%;
}
</style>


<div id="div-1">
<p>id = div-1</p>
<div id="div-1a">
<p>id = div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div id="div-1b">
<p>id = div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div id="div-1c">
<p>id = div-1c</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
</div>

Getting closer...


#div-1 {
position:relative;
height: 200px;
overflow: auto;
}
#div-1a {
position:absolute;
top:0;
height:200px;
}
#div-1b {
position:absolute;
top:200px;
height:200px;
}
#div-1c {
position:absolute;
top:400px;
height:200px;
}


but the show code, doesn't seemm to work... I think I'm using the wrong method with the top:0px....

<script>
$(document).ready(function () {
$("#btn1").click(function() {
$("#div-1a")).animate({ top : "0px" };
});
$("#btn2").click(function() {
$("#div-1b")).animate({ top : "0px" };
});
$("#btn3").click(function() {
$("#div-1c")).animate({ top : "0px" };
});
});
</script>

<script>
$(document).ready(function () {
$("#btn1").click(function() {
$("#div-1a")).animate({ top : "0px" };
});
$("#btn2").click(function() {
$("#div-1b")).animate({ top : "0px" };
});
$("#btn3").click(function() {
$("#div-1c")).animate({ top : "0px" };
});
});
</script>

Assuming you have the jQuery library on your page, your syntax is out of order. Fixed:

$(document).ready(function () {
$("#btn1").click(function() {
$("#div-1a").animate({top : "0px"}, 500); /* 500ms animation */
});
$("#btn2").click(function() {
$("#div-1b").css(top : "0px"); /* no animation */
});
$("#btn3").click(function() {
$("#div-1c").animate({top : "0px"}, 1000); /* 1000ms (1 second) animation */
});
});

Thanks! I'll try that!