Javascript to swap layer visability onClick

I'm creating a layout with "tabbed pages" where clicking one "tab" shows that layer but hides the currently visable one.  I can't figure out how to handle both functions with the one even handler.  Does anyone have a simple sample script for this that will work in IE and NS?  If it is W3C I would think it would work in both, right?
nericksxAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GwynforWebCommented:
<script>
function toggle(obj){
if (obj.style.zIndex==1){
 temp=document.getElementById('d2').style.zIndex
document.getElementById('d2').style.zIndex=document.getElementById('d1').style.zIndex
 document.getElementById('d1').style.zIndex=temp
  }
}
</script>

<body>
<div id="d1"
style="position:absolute;top:100;left:100;height:200;width:200;background-color=yellow;z-index:1"
 onclick="toggle(this)"></div>

<div id="d2"
style="position:absolute;top:130;left:130;height:200;width:200;background-color=aqua;z-index:2"
  onclick="toggle(this)">
</div>
</body>
0
GwynforWebCommented:
this is better

<script>
max=4
function toggle(obj){
max+=1
obj.style.zIndex=max
}
</script>


<body>
<div id="d1"
style="position:absolute;top:100;left:100;height:200;width:200;background-color=yellow;z-index:1"
onclick="toggle(this)"></div>
<div id="d2"
style="position:absolute;top:120;left:130;height:200;width:200;background-color=aqua;z-index:2"
onclick="toggle(this)"></div>
<div id="d3"
style="position:absolute;top:140;left:160;height:200;width:200;background-color=green;z-index:3"
onclick="toggle(this)"></div>
<div id="d4"
style="position:absolute;top:160;left:190;height:200;width:200;background-color=red;z-index:4"
onclick="toggle(this)"></div>
</body>
0
GwynforWebCommented:
background-color=red  should read  background-color:red  same for the other colors   else it will not run in NS
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

nericksxAuthor Commented:
Cool, but I don't want to swap their z-index because you'll still be able to see the layers underneath.  I need to swap the visabilty (visable, hidden).  I'm not sure how I would swap in the syntax for visability in the code above.  (I like how short it is, tho!)
0
Nash2334Commented:
nericksx -

Here is some code from a previous post I made.  You can swap the table tags for divs.  Note the cookie functions to remember the last visible table.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
     <title>Show Hide Test</title>
 
  <script language="JavaScript" type="text/javascript">
  iNumTables = 2; // number of tables on page
 
  function showTable(iTableID)
  {
    var i;
    var objTable;
   
    // loop through all tables on page
    for (i = 1; i <= iNumTables; i ++)
    {
      // get table object
      objTable = document.getElementById("table" + i);
     
      // show table if specified by function and set displayed table cookie; hide all others
      if (i == iTableID)
      {
        objTable.style.display = "inline";
        setCookie("ckCurrentTable", i);
      }
      else
        objTable.style.display = "none";
    }
  }
 
  function showLastTable()
  {
    var iTableToShow = getCookie("ckCurrentTable");
   
    if (iTableToShow == null)
      showTable(1);
    else
      showTable(iTableToShow);
  }
 
  // cookie functions
  function setCookie (strName, strValue)
  {
    document.cookie = strName + "=" + escape(strValue);
  }

  function getCookie (strName)
  {
    var cookie = document.cookie;
    var iCookieStart = cookie.indexOf(strName + "=");
    var iCookieEnd;
   
    if (iCookieStart == -1)
      return null; // cookie does not exist
   
    iCookieStart = cookie.indexOf("=", iCookieStart) + 1;
    iCookieEnd = cookie.indexOf(";", iCookieStart);
   
    if (iCookieEnd == -1)
      iCookieEnd = cookie.length;
     
    return unescape(cookie.substring(iCookieStart, iCookieEnd));
  }
 
  </script>
 
</head>

<body onLoad="showLastTable();">

<div><a href="javascript:showTable(1);">Table 1</a> | <a href="javascript:showTable(2);">Table 2</a></div>

<table id="table1" border="1">
  <tr>
    <td>
      Table 1
    </td>
  </tr>
</table>

<table id="table2" border="1" style="display: none;">
  <tr>
    <td>
      Table 2
    </td>
  </tr>
</table>

</body>
</html>
0
devicCommented:
something like this:
========================
<script>
var lastTab=null;
function chTab(obj)
{
      obj.cont=document.getElementById("content"+obj.id.match(/\d/));
      obj.cont.style.display="";
      obj.style.fontWeight="bold";
      if(lastTab)
      {
            lastTab.cont.style.display="none";
            lastTab.style.fontWeight="normal";
      }
      lastTab=obj;
}
</script>

<button id=tab1 onclick=chTab(this)>Tab1</button>
<button id=tab2 onclick=chTab(this)>Tab2</button>
<button id=tab3 onclick=chTab(this)>Tab3</button>
<button id=tab4 onclick=chTab(this)>Tab4</button>
<button id=tab5 onclick=chTab(this)>Tab5</button>

<div style="display:none"id=content1>Tab1 Tab1 Tab1 Tab1 Tab1 Tab1</div>
<div style="display:none" id=content2>Tab2 Tab2 Tab2 Tab2 Tab2 Tab2</div>
<div style="display:none" id=content3>Tab3 Tab3 Tab3 Tab13 Tab3 Tab3</div>
<div style="display:none" id=content4>Tab4 Tab4 Tab4 Tab4 Tab4 Tab4</div>
<div style="display:none" id=content5>Tab5 Tab5 Tab5 Tab5 Tab5 Tab5</div>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
nericksxAuthor Commented:
Ok, I totally cheated and used the built in behaviors in Dreamweaver.  I'm totally ashamed but it was pretty slick.  Thanks to everyone who responded, points for everyone for going to the effort (esp Gwyn who did write a very elegant script).
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.