Combine Two Functions For a OnClick Event

I am try to make a form that appears to be multi page. I am trying to use a button to hide one div and display another at the same time my script is

head
<script language=javascript type='text/javascript'>
function hidediv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){//if they are 'see' divs
if (document.getElementById) // DOM3 = IE5, NS6
divs[i].style.visibility="hidden";// show/hide
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'hidden';
else // IE 4
document.all.hideShow.divs[i].visibility = 'hidden';
}
}
}

function showdiv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){
if (document.getElementById)
divs[i].style.visibility="visible";
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'visible';
else // IE 4
document.all.hideShow.divs[i].visibility = 'visible';
}
}
}
</script>


body
<form name="PublicOrderPage" action="save_client_information.php" onsubmit="return validateForm()" method="post">


<div id="div1" style="width:600px; height: auto;background: yellow;">
<table width="600" border="0">
<tr>
<legend><h3 style="padding-left:172.5px;">Required Client Information</h3></legend>
</tr>
<tr>
<td style="padding-left:25px;"><b>Name:</b></td>
<td><input type="text" name="client_name" id="client_name" value="<?php echo $_POST['client_name']; ?>" /></td>
<td style="padding-left:25px;"><b>Home Phone:</b></td>
<td><input type="text" name="client_home_phone" id="client_home_phone" value="<?php echo $_POST['client_home_phone']; ?>" /></td>
</tr>
</table>
<br/>
<table width="270" border="0">
<tr>
<td style="padding-left: 180px;"><b>Email:</b></td>
<td><input type="text" name="client_email" id="client_email" value="<?php echo $_POST['client_email']; ?>" /></td>
</tr>
</table>
<br/>
<table>
<tr>
<td style="padding-left:280px;"><input name="save_client_info" type="button" value="Next" onclick="hidediv('1');shwodiv('2');" > </td>
</tr>
</table>
</div>




<div id="div2" style="width:600px; height: auto;background: yellow; ">
<table width="600" border="0">
<tr>
<legend><h3 style="padding-left:172.5px;">Required Site Information</h3></legend>
</tr>
<tr>
<td style="padding-left:25px;"><b>Site Street:</b></td>
<td><input type="text" name="site_street" id="site_street" value="<?php echo $_POST['site_street']; ?>" /></td>
<td style="padding-left:25px;"><b>Site City:</b></td>
<td><input type="text" name="site_city" id="site_city" value="<?php echo $_POST['site_city']; ?>" /></td>
</tr>
</table>
<br/>

<legend><h3>Inspection Type</h3></legend>
<table width="270" border="0">
<table width="602" border="0">
<tr>
<td width="252"><input type="checkbox" name="cb_full_home" id="cb_full_home" <?php if ($_POST['cb_full_home']) echo 'checked="checked"'; ?> />
Full Home</td>
<td width="150"><input type="checkbox" name="cb_4_point" id="cb_4_point" <?php if ($_POST['cb_4_point']) echo 'checked="checked"'; ?> />
4 Point</td>
</tr>
<tr>
<td ><input type="checkbox" name="cb_condominium" id="cb_condominium" <?php if ($_POST['cb_condominium']) echo 'checked="checked"'; ?> />
Condominium</td>
<td ><input type="checkbox" name="cb_wind_mit" id="cb_wind_mit" <?php if ($_POST['cb_wind_mit']) echo 'checked="checked"'; ?> />
Wind Mit</td>
</tr>
<tr>
<td ><input type="checkbox" name="cb_roof_cert" id="cb_roof_cert" <?php if ($_POST['cb_roof_cert']) echo 'checked="checked"'; ?> />
Roof Cert</td>
<td ><input type="checkbox" name="cb_drywall" id="cb_drywall" <?php if ($_POST['cb_drywall']) echo 'checked="checked"'; ?> />
Drywall</td>
</tr>
<tr>
<td><input type="checkbox" name="cb_reinspect" id="cb_reinspect" <?php if ($_POST['cb_reinspect']) echo 'checked="checked"'; ?> />
Re-Inspect</td>
<td><input type="checkbox" name="cb_followup" id="cb_followup" <?php if ($_POST['cb_followup']) echo 'checked="checked"'; ?> />
Follow-Up</td>

</table>
<img src="CaptchaSecurityImages.php" />
Security Code:
<input id="security_code" name="security_code" type="text" />
<br />
<input name="save_client_info" type="submit" value="Save" />
</div>
</form>


When the next button is used I would Like to Hide Div1 And Display Div2 so that it looks as if it is a new page.

Any help would be greatly appreciated.

here's the cheap and nasty way to do it... I don't know if it will work for you - I'm not sure what your "pass" variable does

var a=1;
function handleDiv() {
if (a==1) {
alert("showing some stuff, hiding other stuff")
a=2;
return; }
if (a==2) {
alert("hiding some stuff, showing other stuff");
a=1;
}
}

<input type="button" value="Next" onclick="handleDiv()">

xelawho Thanks for the post. I tried the to implement the code, but it has no affect on the page.

Why not do something like this:
var current=1;
function increment_div() {
if(document.getElementById("div"+current) && document.getElementById("div"+(current+1))){
//hide the current div
document.getElementById("div"+current).style.display="none";
//show the next div
document.getElementById("div"+(current+1)).style.display="block";
}
else{
alert("Unable to locate necessary div element(s)...");
}
}

You don't need to support Netscape 4, IE4 or other basically unused browsers anymore so you can skip a lot of that code you had and just put the incrementation into a single function.

Your "next" button would be set up like so:
<input name="save_client_info" type="button" value="Next" onclick="increment_div();" />

Thank you so much Rowsdower! that is exactly what I was looking for.

How can I take this and add new div's I would like to use this for four seperate tables?

Solved it thanks again to every one for the fast replies.