I've written a very long market research survey which is divided into 6 sections. I began by using PHP to manage the display of each section but it soon became very complex trying to pass the session variables of each page to the next page before submitting the form. Now I'm thinking of a different approach but my JS is rubbish

What I need to achieve:
- when the page loads, only "Section 1" should be visible
- links at the bottom of the section allow the user to go back to the previous section or on to the next section
- the page should never refresh

What I've got so far:
Here's a basic script which allows me to hide/show a section when the user clicks links. Great, this is just what I need as there's no page refresh. Am I going in the right direction to find a solution to this ? Should I (and is it possible ??) now amend the script to achieve the above points ?

HTML Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Hide Layers Without Page Refresh</title>
<script language="javascript">


function toggleLayer(id, NNtype, IEtype, WC3type) {
    if (document.getElementById) {
        eval("document.getElementById(id).style.visibility = \"" + WC3type + "\"");
    } else {
        if (document.layers) {
            document.layers[id].visibility = NNtype;
        } else {
            if (document.all) {
                eval("document.all." + id + ".style.visibility = \"" + IEtype + "\"");
            }
        }
    }
}
</script>
</head>
<body>

<h2>Sections to be shown one at a time</h2>
<div align="center">
	<div id="LayerName1">
		<h3>Section 1: blah blah blah </h3>
		<p><!-- insert link to show section 2--></p>
	</div>
	<div id="LayerName2">
		<h3>Section 2: blah blah blah </h3>
		<p><!-- insert link to show back to section 1--></p>
		<p><!-- insert link to show section 3--></p>
	</div>
	<div id="LayerName3">
		<h3>Section 3: blah blah blah </h3>
		<p><!-- insert link to show back to section 2--></p>
	</div>
</div>

<h2>Links</h2>
<p>
<a href="#" onmousedown="toggleLayer('LayerName1','hidden','hidden','hidden')">Hide Section 1</a> <br />
<a href="#" onmousedown="toggleLayer('LayerName1','show','visible','visible')">Show Section 1</a><br />
</p>

</body>