Welcome to WebmasterWorld Guest from 54.163.23.73

Forum Moderators: open

Message Too Old, No Replies

Show/Hide Layers

But start with divs hidden...

     

rover

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

10+ Year Member



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>

DrDoc

7:40 am on Feb 24, 2006 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



In your style sheet:

#one_myvar, #two_myvar {
display: none;
}

rover

4:23 pm on Feb 24, 2006 (gmt 0)

10+ Year Member



Thanks very much for your help. When I tried adding:

#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.