/

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"

http://blog.movalog./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"

• javascript
• html
• toggle
• visibility

• 2 Can you show your code of multiple divs? – Oriol Commented Jul 14, 2013 at 18:39
• 1 Any reason for <!--s in the script tags? Or are you targeting browsers older than Netscape 2? – Benjamin Gruenbaum Commented Jul 14, 2013 at 18:40
• Which divs do you want this to affect? Are you identify them with their id or with class-names? – David Thomas Commented Jul 14, 2013 at 18:42
• Each id must be unique in the document. If you want to have more than one element with the same id, you should use classes instead. – Oriol Commented Jul 14, 2013 at 18:55

4 Answers 4

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

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

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>

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