[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1457
  • Last Modified:

Toggle multiple DIV items from one link

I need help with the following
Sequence:
1) Detect all DIV items within a page
2) Create an array of the names (id's) of all DIV items collected
3) Test each name against the name passed into the function (div id argument)
4) If the name matches, show DIV, toggle all the rest

... oh, and I need to be able to do this with one click of a link :)
Here is my code. I am ready to strangle it. Please help:

<script language="javascript">

function divshowhide(divid){
   var alldivsonpage = document.getElementsByTagName('div');
   var divArray = alldivsonpage;
   var divnameArray = new Array();
   var dts = document.getElementById('divid');


      for(i=0;i<divArray.length;i++) {
             //next, for each div counted, get name of div
            //here is where i get into trouble
            divnameArray = "The name of each div element in divArray(i)";//how to access it?
      }

            
      for(x=0;i<divnameArray.length;x++) {
      
            if ( divnameArray(x) == dts )
                  dts.style.display = 'block';
                              
            } else {
                  document.getElementById(divnameArray(x)).style.display='none';
            
            }
            
      }
}


</script>

Links and divs:
<a href="javascript:;"onmousedown="divshowhide(idd);">layer one</a><br>
<div id="idd" style="display:none">
This is the first layer
</div>

Thanks in advance
0
dotIT
Asked:
dotIT
  • 3
1 Solution
 
basicinstinctCommented:
holy guacamole, you are making it much harder than it needs to be...

check this out, it's a minimal version of your code...

<html>
<head>
<script language="javascript">
function divshowhide(divid)
{
   var divArray = document.getElementsByTagName('div');
      for(i=0;i<divArray.length;i++)
      {
            if(divArray[i].id == divid)
      divArray[i].style.display = 'block';
      else
      divArray[i].style.display = 'none';
      }
}
</script>
</head>
<body>

<a href="javascript:;"onmousedown="divshowhide('idd');">layer one</a><br>
<div id="idd" style="display:none">
      <p>Hello</p>
</div>
<div id="idE">
      <p>Goodbye</p>
</div>
</body>
</html>
0
 
basicinstinctCommented:
by the way, you were talking about names and ids interchangably, but they are different things...

if you want to match names instead, change this line:

 if(divArray[i].id == divid)

to this:

 if(divArray[i].name == divid)

If you want to match either name or id then change it to this:

 if(divArray[i].id == divid || divArray[i].name == divid)
0
 
basicinstinctCommented:
And you say you want to "toggle" the others, which means show them if they are hidden, hide them if they are shown...  if that;s really what you want to do then change this line:

divArray[i].style.display = 'none';

to this:

divArray[i].style.display = (divArray[i].style.display == 'none')?'block':'none';

0
 
dotITAuthor Commented:
holy tortilla chips, it works!  :)

Thanks for opening my eyes.
For some stupid reason, I got it into my brain that I needed to make a list of divs in order to access the other properties of the object. I think I had too much chocolate.
Oh, and sorry for the confusion with the name and id references, as I did mean id- its been a while.

The first code does exactly what I need it to do and I got a good laugh at your initial reaction to boot.
Points WELL earned.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now