I has a static page with a bunch of short stories aligned vertically down a page. I need to set some thing up so that the initial view shows only five stories followed by a button that, when clicked, expands the page downward, so that 10 stories show. This is followed by another button and so on. Basically lengthening the page in "read more" increments.

I was able to get some help and the code I have does expand the page once. Is there any way to make it work more than once on a page? Here's the script I was given. I had som ething else I did, but this seems cleaner than mine... although it doesn't seem to be doing what I need it to do.

I trimmed the html protion to save space to 2 stories. Anyone have any ideas?

Code:
<html>
<head>
<script>
var incident = 1;
function open_text() {
	document.getElementById('img1').style.display = "none";
	document.getElementById('img2').style.display = "block";
	document.getElementById('a'+incident).style.display = "block";
	}
function close_text(){
	document.getElementById('img2').style.display = "none";
	document.getElementById('img1').style.display = "block";
	document.getElementById('a'+incident).style.display = "none";

	if(incident < 3){
		incident++;
	}else{
		incident = 1;
	}
}
</script>
<style>
#a1, #a2, #a3{
	display:none;
}
#img1{
	height: 30px;
	width: 50px;
	background-image: url('../images/expander-img1.jpg');
}
#img1:hover{
	background-image: url('../images/expander-img1-over.jpg');
}
#img2{
	height: 30px;
	width: 50px;
	display:none;
	background-image: url('../images/expander-img2.jpg');
}
#img2:hover{
	background-image: url('../images/expander-img2-over.jpg');
}
</style>
<body>

<div class="container">
	<div class="sectionfull">

		<h2 class="sectiontitle">Title: This story and the next one are always visible</h2>
		<div class="subsectionfull cf">
                  		<p class="body">Content 1</p>
		</div>

	<hr class="line">

		<h2 class="sectiontitle">Title 2</h2>
		<div class="subsectionfull cf">
                  		<p class="body">Content 2</p>
		</div>

	<hr class="line">

   
<!--expander1-->


	<div onClick="openClose('a1')" style="cursor:hand; cursor:pointer"><div id="img1" onclick="open_text();"></div>
	<div id="img2" onclick="close_text();"></div>

		<div id="a1" class="texter"> <!--- here's the SECOND group that is hidden until the first button is clicked-->

			<h2 class="sectiontitle">Title: This story and the next one are  visible after the first bottom above is clicked.</h2>
			<div class="subsectionfull cf">
                 			 <p class="body">Content 1</p>
			</div>

		<hr class="line">

			<h2 class="sectiontitle">Title: This story and the next one are visible after the first bottom above is clicked.</h2>
			<div class="subsectionfull cf">
                 			 <p class="body">Content 1</p>
			</div>

		<hr class="line">


<!--expander2-->


		<div onClick="openClose('a1')" style="cursor:hand; cursor:pointer"><div id="img1" onclick="open_text();"></div>
		<div id="img2" onclick="close_text();"></div>

			<div id="a1" class="texter"> <!--- here's the SECOND group that is hidden until the first button is clicked-->

				<h2 class="sectiontitle">Title: This story and the next one are  visible after the first bottom above is clicked.</h2>
				<div class="subsectionfull cf">
                 				 <p class="body">Content 1</p>
				</div>

			<hr class="line">

				<h2 class="sectiontitle">Title: This story and the next one are visible after the first bottom above is clicked.</h2>
				<div class="subsectionfull cf">
                 				 <p class="body">Content 1</p>
				</div>

			<hr class="line">
<!--expander3-->

			<div onClick="openClose('a1')" style="cursor:hand; cursor:pointer"><div id="img1" onclick="open_text();"></div>
			<div id="img2" onclick="close_text();"></div>

				<div id="a1" class="texter"> <!--- here's the SECOND group that is hidden until the first button is clicked-->

					<h2 class="sectiontitle">Title: This story and the next one are  visible after the first bottom above is clicked.</h2>
					<div class="subsectionfull cf">
                 					 <p class="body">Content 1</p>
					</div>

				<hr class="line">

					<h2 class="sectiontitle">Title: This story and the next one are visible after the first bottom above is clicked.</h2>
					<div class="subsectionfull cf">
                 					 <p class="body">Content 1</p>
					</div>

				<hr class="line">
			</div>
		</div>
	</div>
</div>


</body>
</html>