Javascript toggle visibility multiple divs

Question

http://blog.movalog.com/a/javascript-toggle-visibility/

this is a page with some code and a script im using in my site for an image gallery, however when trying to toggle the visibility of multiple div's it only works on the first. can someone please fix it to work with multiple div's, i dont know js :)

here is the javascript

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

and here is the html code for the links

<tr><td><a href="#" onclick="toggle_visibility('nyc');">New York</a></td>
<td><a href="#" onclick="toggle_visibility('photoshop');">Photoshop Work</td>
<td><a href="#" onclick="toggle_visibility('photography');">Photography</td></tr>
<tr><td><a href="#" onclick="toggle_visibility('art');">Art Projects</td></tr>

wait a sec, could this not be working because it is trying to acess the properties of multiple divs via the "id" property, would it work with the class property and if so would i just change the java script where it says "id" to "class"

Answer 1

It seems that you were trying something like

<div id="a"></div>
<div id="a"></div>

toggle_visibility('a');

The problem is that each id must be unique in the document, so document.getElementById returns a single element, not a collection of elements.

Then, if you want to have more than one element with the same id, you should use classes instead.

<div class="a"></div>
<div class="a"></div>


function toggle_visibility(cl){
   var els = document.getElementsByClassName(cl);
   for(var i=0; i<els.length; ++i){
      var s = els[i].style;
      s.display = s.display==='none' ? 'block' : 'none';
   };
}
toggle_visibility('a');

---

If you want to make it work with multiple classes, use

var toggle_visibility = (function(){
   function toggle(cl){
       var els = document.getElementsByClassName(cl);
       for(var i=0; i<els.length; ++i){
          var s = els[i].style;
          s.display = s.display==='none' ? 'block' : 'none';
       };
   }
   return function(cl){
      if(cl instanceof Array){
         for(var i=0; i<cl.length; ++i){
            toggle(cl[i]);
         }
      }else{
         toggle(cl);
      }
   };
})();
toggle_visibility('myclass');
toggle_visibility(['myclass1','myclass2','myclass3']);

Answer 2

You can use

function toggle_visibility(id) {
   function toggle(id){
      var el = document.getElementById(id);
      el.style.display = el.style.display==='none' ? 'block' : 'none';
   }
   if(id instanceof Array){
      for(var i=0; i<id.length; ++i){
         toggle(id[i]);
      }
   }else{
      toggle(id);
   }
}

And call it like

toggle_visibility('myid');
toggle_visibility(['myid1','myid2','myid3']);

---

Another possible way is using arguments variable, but that could slow down your code

function toggle_visibility() {
   function toggle(id){
      var el = document.getElementById(id);
      el.style.display = el.style.display==='none' ? 'block' : 'none';
   }
   for(var i=0; i<arguments.length; ++i){
      toggle(arguments[i]);
   }
}

And call it like

toggle_visibility('myid');
toggle_visibility('myid1','myid2','myid3');

---

If you don't want to create the function toggle each time you call toggle_visibility (thanks @David Thomas), you can use

var toggle_visibility = (function(){
   function toggle(id){
      var el = document.getElementById(id);
      el.style.display = el.style.display==='none' ? 'block' : 'none';
   }
   return function(id){
      if(id instanceof Array){
         for(var i=0; i<id.length; ++i){
            toggle(id[i]);
         }
      }else{
         toggle(id);
      }
   };
})();
toggle_visibility('myid');
toggle_visibility(['myid1','myid2','myid3']);

Or

var toggle_visibility = (function(){
   function toggle(id){
      var el = document.getElementById(id);
      el.style.display = el.style.display==='none' ? 'block' : 'none';
   }
   return function(){
      for(var i=0; i<arguments.length; ++i){
         toggle(arguments[i]);
      }
   };
})();
toggle_visibility('myid');
toggle_visibility('myid1','myid2','myid3');

Answer 3

You either need to cycle through a list of ids or use a class name as the argument to toggle_visibilty ---- which means you would have to edit the function. It looks like right now you are only calling toggle_visibility on one element.

jQuery makes this kind of thing easier:

  <code>
  //selects all elements with class="yourClassName"
  jQuery(".yourClassName").toggle();

  //select all divs
   jQuery("div").toogle();

  //select all divs inside a container with id="myId"
 jQuery("#myId > div").toggle();
 </code>

Answer 4

There is a very silly mistake in your code.. Add the id attribute in the td tags id='nyc', etc. and it should work fine