toggling between div layers--need the ability to expand the code below to include many layers?

Originally got this code from Zyloch, and works perfectly for my needs, now i would like to expand it but am having difficulty doing so--i think i am thinking about it in the wrong way is all-- but was wondering if this could be adjusted?-

function toggleContrast(show, hide)
{
    var showObj = document.getElementById(show);
    var hideObj = document.getElementById(hide);

    showObj.style.display = '';
    hideObj.style.display = 'none';
}

Call it like this:

toggleContrast('test1', 'test2');

and for the button to show test2 div,

toggleContrast('test2', 'test1');

Currently this can swap between 2 layers, but i would like to be able to turn off any number of layers, and turn on only the one i select. thanks so much, let me know if i can be clearer and give more info.
LVL 1
toddkellerAsked:
Who is Participating?
 
ZvonkoSystems architectCommented:
My method is this:

var theDiv;
function showDiv(divID){
   if(theDiv) theDiv.style.display = 'none';
   theDiv = document.getElementById(divID);
   theDiv.style.display = 'block';
}


That way you only care what next div should be shown.
The previous div is automaticaly hiddn.

0
 
HonorGodSoftware EngineerCommented:
 Perhaps you could uses a list of id's in each string.

function HideAndSeek( showList, hideList )
{
  var hide   = hideList.split( ',' );
  for ( var i = 0; i < hide.length; i++ ) {
    document.getElementById( hide[ i ] ).display = 'none';
  }

  var show = showList.split( ',' );
  for ( var i = 0; i < show.length; i++ ) {
    document.getElementById( show[ i ] ).display = '';
  }
}

HideAndSeek( 'test1,test2,test3', 'testA,testB,testC' );
  or
HideAndSeek( 'testA,testB,testC', 'test1,test2,test3' );
0
 
toddkellerAuthor Commented:
thanks! i will check these out, sorry have been gone for awhile
t
0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

 
toddkellerAuthor Commented:
Zvonko, does your method work if the div's can be selected out of order?---say you display 5 links to div's with one div always default showing, but you can pick any link to show any div in any order?- i guess i am confused about how to call the div to show?-
0
 
ZvonkoSystems architectCommented:
Before we increase the confusion better show your page html source and I show you how to use my method.

0
 
toddkellerAuthor Commented:
Sure will send you the code tonight, i'll strip it down simple without images and all that and post it later, sorry for the confusion
t
0
 
toddkellerAuthor Commented:
Okay, here is a very cut down version(hopefully not too messy) of 3 main div's with 3 different <a> tags in each div.  Sort of like folder tabs at the top of each div.  What i would like to do is be able to switch to each main div by pressing the "tabs" at the top.  Currently the code above works for two div's, but i would like it to work for as many as i need, say if i made a larger overall table and wanted to put 10 folders(in this case div's) on top of each other and wanted to switch between any one at any time.  Take a look and see if my explanation is okay.

<html>
 <head>
<script>
function toggleContrast(show, hide)
{
    var showObj = document.getElementById(show);
    var hideObj = document.getElementById(hide);

    showObj.style.display = '';
    hideObj.style.display = 'none';
}
</script>

</head>
<body>
<table width="411" border="0" cellpadding="0" cellspacing="0" align="center">
  <tr>
    <td width="339">
      <div id="personalinfo" style="width:339px;overflow:auto; background-color:#FF3333; height:227px; border:none;">
         <table width="339">
           <tr>
             <td width="66" height="20" ><div style="position:relative;"><a href="#"><img style="background-color:#33CC66;" width="60" height="20" border="0"></a></div></td>
             <td width="126" ><div style="position:relative;"><a href="#"><img style="background-color:#0099FF;" width="128" height="20" border="0"></a></div></td>
               <td width="128" ><div style="position:relative;"><a href="#"><img  style="background-color:#CC3333; " width="130" height="20" border="0"></a></div></td>
           </tr>
           <tr>
             <td height="181" colspan="4"></td>
           </tr>
          </table>
      </div>
             

      <div id="employmentinfo" style="display:none; position:relative; background-color:#0099FF; top:-7px; width:339px; overflow:hidden; height:214px; border:none;">
         <table width="339">
           <tr>
           <td width="73" height="20" ><div style="position:relative;"><a href="#"><img style=" background-color:#33CC66;" width="60" height="20" border="0"></a></div></td>
               <td width="126" ><div style="position:relative;"><a href="#"><img style="background-color:#0099FF;" width="126" height="20" border="0"></a></div></td>
               <td width="133" valign="top" ><div style="position:relative;"><a href="#" ><img style="background-color:#CC3333;" width="133" height="20" border="0"></a></div></td>
           </tr>
           <tr>
             <td height="181" colspan="4" ></td>
           </tr>
          </table>
      </div>
        
       <div id="generalinfo" style=" display:none; position:relative; top:-70px; background-color:#339966;width:339px;overflow:hidden; height:214px; border:none;">
         <table width="339" cellpadding="0" cellspacing="0" >
           <tr>
           <td width="73" height="20" ><div style="position:relative;"><a href="#"><img style=" background-color:#33CC66;" width="60" height="20" border="0"></a></div></td>
               <td width="126" ><div style="position:relative;"><a href="#"><img style="background-color:#0099FF;" width="126" height="20" border="0"></a></div></td>
               <td width="133" valign="top" ><div style="position:relative;"><a href="#"><img style="background-color:#CC3333;" width="133" height="20" border="0"></a></div></td>
           </tr>
           <tr>
             <td height="181" colspan="4" ></td>
           </tr>
          </table>
      </div>
      </td>
  </tr>
</table>
</body>
</html>
0
 
toddkellerAuthor Commented:
Also, is there a way i could just call to turn the other's display off from an Onclick event?- like. this.document.currentdiv.display= 'none' ?.
0
 
toddkellerAuthor Commented:
zvonko, on your original comment, i'm sorry i don't understand, but if i had 3 div's on a page, and i had <a> tags that turned on one div while turning off the others, would your code work for that?- i'm not sure how to integrate it.--really all i was looking for was a way to add more than two div's to your original code. i believe your new answer does this but i am not sure how to go about, my example up above might not explain my case, i am sorry for this.

Honorgod, i was wondering about implementation on your code as well?- could you give me an example of div's turning off and on, so i make sure i understand? thanks
t
0
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.

All Courses

From novice to tech pro — start learning today.