Toggle multiple DIV items from one link

Posted on 2007-09-30
Last Modified: 2013-11-19
I need help with the following
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 )
         = 'block';
            } else {


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

Thanks in advance
Question by:dotIT
    LVL 23

    Accepted Solution

    holy guacamole, you are making it much harder than it needs to be...

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

    <script language="javascript">
    function divshowhide(divid)
       var divArray = document.getElementsByTagName('div');
                if(divArray[i].id == divid)
          divArray[i].style.display = 'block';
          divArray[i].style.display = 'none';

    <a href="javascript:;"onmousedown="divshowhide('idd');">layer one</a><br>
    <div id="idd" style="display:none">
    <div id="idE">
    LVL 23

    Expert Comment

    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)
    LVL 23

    Expert Comment

    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';


    Author Comment

    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.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Join & Write a Comment

    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now