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 t

Answer 1

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

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

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