scratchpad
Utilitarian
<c>
<html>
<head>
<title>Invisible divs</title>
<script>
function showDiv(nextDiv)
{
for ( var dnum = 0; dnum < 4; ++dnum ) // Change 4 to suit number of divs in page
{
var currentDiv = document.getElementById("div" + dnum);
currentDiv.style.display = ( currentDiv.id == nextDiv ) ? "block" : "none";
}
}
</script>
</head>
<body onload="showDiv('div0');">
<!-- change action below to suit your needs-->
<form action="/cgi-bin/assesTest.pl">
<div id="div0" style="display: none;">
This will be the only bit visible at first
<a href="#" onclick="showDiv('div1')">Next ></a>
</div>
<div id="div1" style="display: none;">
This will be visible after clicking on the link at the end of the first div
<a href="#" onclick="showDiv('div2')">Next ></a>
</div>
<div id="div2" style="display: none;">
This will be visible after clicking on the link at the end of the second div
<a href="#" onclick="showDiv('div3')">Next ></a>
</div>
<div id="div3" style="display: none;">
This is the last element to display
<input type="submit">
</div>
</form>
</c>