asked on

JavaScript Hide/Show

Hi Experts,
The JavaScript below hides some content on the page when the Hide Menu link is clicked.
What I would like to achieve is that upon page load the Show Menu link be active and the menus appear only after the Show Menu link is clicked.
Thank you for your help.

<!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=iso-8859-1" />
<title>Show/Hide</title>
<link rel="stylesheet" href="/Scripts/Styles.css" type="text/css" />

<script language="javascript" type="text/javascript">
function showHide(shID) {
   if (shID == "hide")
   {

		document.getElementById('a1').className = "disappear";
		document.getElementById('a2').className = "disappear";
		document.getElementById('a3').className = "disappear";
		document.getElementById('a4').className = "disappear";
		document.getElementById('wrap').className = "reappear";
		document.getElementById('example').className = "disappear";

   }
      else {

         document.getElementById('a1').className = "reappear";
		document.getElementById('a2').className = "reappear";
		document.getElementById('a3').className = "reappear";
		document.getElementById('a4').className = "reappear";
		document.getElementById('wrap').className = "disappear";
		document.getElementById('example').className = "reappear";
      }

}
</script>
<style type="text/css">


   /* This CSS is used for the Show/Hide functionality. */


	.disappear{
		display:none;
	}

	.reappear{
		display:block;
	}

</style>
</head>
<body style="background-image:url(/images/bg.jpg)">


<table align="center" class="border" id="bluegrad"><tr>
<td id="a1" colspan="2">

Top Menu

</td></tr><tr>

<td align="center" valign="top" id="a2">
<br />
Side Menu
<img src="/images/blank.gif" height="1" width="150" alt="" />
</td>



<td valign="top">
<br />




<br />
<center>
<div id="example" >
<a href="#" id="example-hide"  onclick="showHide('hide');return false;"><font color="#ff0000"><b>Hide Menu</b></font></a>
</div>
<div id="wrap" class="disappear">
<a href="#" id="example-show" onclick="showHide('show');return false;"><font color="#ff0000"><b>Show Menu</b></font></a>
</div>
</center>
<br />

Content here




</td></tr>
<tr><td align="center" id="a3">
<br />
<a href="javascript: history.go(-1)"><img src="/images/Back.png" alt="Back to Previous Page" width="50" border="0" /></a>

</td><td align="center" id="a4">Text<br /><img src="/images/blank.gif" height="1" width="820" alt="" /></td></tr>

</table>
<br /><br />


</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Stefan Motz

ASKER

Thank you very much; it works!

Tom Beck

You're welcome. Glad to help. Thanks for the points.