Page is a not externally linkable
- Code, Content, and Presentation
-- JavaScript and AJAX
---- Show/Hide Layers

rover - 12:28 am on Feb 24, 2006 (gmt 0)


I want to use the following code to show and hide layers with Javascript and CSS, but I can't figure out how to modify the code so that the layers will start out hidden when the page is loaded.

With the code below the divs start out being shown, and then can be switched to being hidden, but I need the opposite.

I've tried various ways with the following part of the code with no luck:

------------

function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display!= "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}

------------

Here is the full code for the page:

<!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>Switch menu</title>
<style type="text/css">
<!--
body {
text-align:center;
margin:30px;
}
#wrapper {
text-align:left;
margin:0 auto;
width:500px;
min-height:100px;
border:1px solid #ccc;
padding:30px;
}
a {
color:blue;
cursor:pointer;
}
*#myvar {
border:1px dotted #ccc;
background:#f2f2f2;
padding:20px;
width: 500px;
}
-->
</style>

<script language="JavaScript">
<!--

function SymError()
{
return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

<script type="text/javascript">
<!--
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display!= "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
//-->
</script>
</head>

<body>

<p><a onclick="switchMenu('one_myvar');" title="Switch the Menu">Switch it now</a></p>
<div id="one_myvar"><div id="myvar">
<p>Some stuff here...</p>
</div></div>

<br><br>

<p><a onclick="switchMenu('two_myvar');" title="Switch the Menu">Switch it now</a></p>
<div id="two_myvar"><div id="myvar">
<p>Some stuff also here..</p>
</div></div>

</body>
</html>

<script language="JavaScript">
<!--
var SymRealOnLoad;
var SymRealOnUnload;

function SymOnLoad()
{
window.open = SymWinOpen;
if(SymRealOnUnload!= null)
SymRealOnUnload();
}

function SymOnUnload()
{
if(SymRealOnLoad!= null)
SymRealOnLoad();
window.open = 'SymRealWinOpen';
SymRealOnUnload = window.onunload;
window.onunload = SymOnUnload;
}

SymRealOnLoad = window.onload;
window.onload = SymOnLoad;

//-->
</script>

Thread source:: http://www.webmasterworld.com/javascript/5058.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com