Forum Moderators: open
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>
#one_myvar, #two_myvar {
display: none;
}
#one_myvar, #two_myvar {
display: none;
}
to the styles, then when the page loads the divs are hidden, but clicking on the links no longer toggles them open.
