Toggle a layer while toggling another simultaneously

**monaya** · 02-06-2010, 09:07 AM

If I set a div to display:none, I have this script to show a layer.

function toggleLayer( whichLayer )
{
var elem, vis;
if( document.getElementById ) // this is the way the standards work
elem = document.getElementById( whichLayer );
else if( document.all ) // this is the way old msie versions work
elem = document.all[whichLayer];
else if( document.layers ) // this is the way nn4 works
elem = document.layers[whichLayer];
vis = elem.style;
// if the style.display value is blank we try to figure it out here
if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}
</script>

<a href="javascript:showHide();" onClick="toggleLayer('sendlg');return false;">do this</a>

How could I adjust it to show one layer but hide another layer

**vwphillips** · 02-06-2010, 09:54 AM

Code:

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.div {
  display:none;width:100px;height:100px;background-Color:#8B8B8B
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
function toggleLayer(id){
 var obj=document.getElementById(id);
 if (this.obj&&this.obj!=obj){
  this.obj.style.display='none';
 }
 obj.style.display=obj.style.display!='block'?'block':'none';
 this.obj=obj;
}

/*]]>*/
</script>
</head>

<body>
<a href="#" onClick="toggleLayer('d0');return false;">d0</a>
<a href="#" onClick="toggleLayer('d1');return false;">d1</a>
<div id="d0" class="div" >Div 0</div>
<div id="d1" class="div" >Div 1</div>
</body>

</html>

**monaya** · 02-06-2010, 10:57 AM

Thanks I think I miscommunicated.

What I was trying to do was show one layer and hide another with the same link.

I think the code now hides both layers by default.

**vwphillips** · 02-06-2010, 12:15 PM

Code:

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
#d0 {
  display:block;width:100px;height:100px;background-Color:#8B8B8B
}

#d1 {
  display:none;width:100px;height:100px;background-Color:#8B8B8B
}
/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
function toggleLayer(id1,id2){
 var obj=document.getElementById(id1);
 obj.style.display=obj.style.display=='none'?'block':'none';
 document.getElementById(id2).style.display=obj.style.display=='block'?'none':'block';
}

/*]]>*/
</script>
</head>

<body>
<a href="#" onclick="toggleLayer('d0','d1');return false;">d0</a>
<div id="d0" >Div 0</div>
<div id="d1" >Div 1</div>
</body>

</html>

**monaya** · 02-06-2010, 03:47 PM

That works great! I was trying to modify it so that the link changes when the layers are switched

Code:

<script type="text/javascript">
/*<![CDATA[*/
function toggleLayer(id1,id2){
 var obj=document.getElementById(id1);
 obj.style.display=obj.style.display=='none'?'block':'none';
 document.getElementById('loginmsg').innerHTML = 'register';
document.getElementById(id2).style.display=obj.style.display=='block'?'none':'block';
 document.getElementById('loginmsg').innerHTML = 'login';
}
/*]]>*/
</script>

It worked good with only the first code block I added. So when you click login it would switch to register, but then when you click register again it doesn't go back to login

**vwphillips** · 02-06-2010, 04:35 PM

Code:

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
#d0 {
  display:block;width:100px;height:100px;background-Color:#8B8B8B
}

#d1 {
  display:none;width:100px;height:100px;background-Color:#8B8B8B
}
/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
function toggleLayer(obj,id1,id2){
 var div=document.getElementById(id1);
 div.style.display=div.style.display=='none'?'block':'none';
 document.getElementById(id2).style.display=div.style.display=='block'?'none':'block';
 obj.innerHTML=div.style.display=='none'?'d1':'d0';
}

/*]]>*/
</script>
</head>

<body>
<a href="#" onclick="toggleLayer(this,'d0','d1');return false;">d0</a>
<div id="d0" >Div 0</div>
<div id="d1" >Div 1</div>
</body>

</html>

**monaya** · 02-06-2010, 08:58 PM

Right now, d0 shows by default, but d1 won't show when the link is clicked but when clicked again d0 shows again.

Is it me, or does it work on your end.

**vwphillips** · 02-07-2010, 08:29 AM

works for me IE7 and FF

**monaya** · 02-07-2010, 03:15 PM

I see what I mean now.

I was trying to make the hyperlink say to show the hidden layer not the one that's already showing.

i.e. link d1 should show when layer d1 is hidden and vice versa, link d0 should show when layer d0 is hidden.

hope that makes sense

**vwphillips** · 02-08-2010, 09:23 AM

Code:

 obj.innerHTML=div.style.display=='none'?'d0':'d1';

Thread: Toggle a layer while toggling another simultaneously

Thread Tools

Search Thread

Toggle a layer while toggling another simultaneously

Bookmarks

Bookmarks

Posting Permissions