I think ,this is what you want...
<!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>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<style type="text/css">
a#click , a#click_hide
{
cursor:pointer;
padding:3px 5px;
background-color:#CCCCFF;
}
.content
{
border:solid 1px #993333;
}
.show
{
display:block;
}
.hide
{
display:none;
}
</style>
<script type="text/javascript">
$(window).ready(function (){
$(".content").addClass("hide");
$(".content:first").removeClass("hide").addClass("show");
$("#click").click(function(){
if($('.show').next().hasClass('content'))
{
$(".show").next().removeClass("hide").addClass("show");
}
});
$("#click_hide").click(function(){
if($('.show:last').hasClass('content'))
{
if($('.show:last').get(0)===$('.show:first').get(0))
{
}
else
{
$(".show:last").removeClass("show").addClass("hide");
}
}
});
});
</script>
</head>
<body>
<div style="width:180px; margin:0px auto;">
<div style="border:solid 1px #CC3300; width:100%; height:90px;">
<div style="text-align:center;">
<a id="click">Show it...</a>
</div>
<div style="text-align:center; padding-top:15px;">
<a id="click_hide">Hide it...</a>
</div>
</div>
<div class="content">
<h1 align="center"> Content 1 </h1>
</div>
<div class="content">
<h1 align="center"> Content 2 </h1>
</div>
<div class="content">
<h1 align="center"> Content 3 </h1>
</div>
<div class="content">
<h1 align="center"> Content 4 </h1>
</div>
<div class="content">
<h1 align="center"> Content 5 </h1>
</div>
</div>
</body>
</html>
It will rock upto
<div class="content">
<h1 align="center"> Content N... </h1>
</div>