«
»

Using Javascript to hide single/multiple div tags with the same name Part 2

Friday, August 14, 2009, 17:36

Recently I was asked by a comment from my previous post Using Javascript to hide single/multiple div tags with the same name on how to get multiple buttons to control multiple div tags. For example, 2 div classes need to be hidden or shown with 2 different buttons controlling them. Turns out this is fairly simple. Basically you can use some previous code and alter some variable names in the javascript, but to make things simple here is the code.

function getElementsByClass(searchClass, domNode, tagName) {
     if (domNode == null) domNode = document;
     if (tagName == null) tagName = '*';
     var el = new Array();
     var tags = domNode.getElementsByTagName(tagName);
     var tcl = " "+searchClass+" ";
     for(i=0,j=0; i<tags.length; i++) {
          var test = " " + tags[i].className + " ";
          if (test.indexOf(tcl) != -1)
               el[j++] = tags[i];
          }
     return el;
}
 
var hidden = false;
function toggle_hideme1() {
     hidden = !hidden;
     var newDisplay;
     if(hidden) {
          newDisplay = 'block';
     }
     else
     {
          newDisplay = 'none';
     }
     var showfirst = getElementsByClass("div_class_name", null, "div");
     for(var i = 0; i < showfirst.length; i++) {
          showfirst[i].style.display = newDisplay;
     }
}
 
var hiddenb = false;
function toggle_hideme2() {
     hiddenb = !hiddenb;
     var newDisplay;
     if(hiddenb)
     {
          newDisplay = 'block';
     }
     else
     {
          newDisplay = 'none';
     }
     var showsecond = getElementsByClass("div_class_name", null, "div");
     for(var k = 0; k < showsecond.length; k++) {
          showsecond[k].style.display = newDisplay;
     }
}

For the variables ‘showfirst’ and ‘showsecond’ you can call them what ever you want, just make sure they stay the same in only one function, not two. Be sure to change ‘div_class_name’ to a custom name for each field.

Also, these are setup to be hidden first, you can change that by swapping the ‘newDisplay = ‘ lines.

For the HTML code we are going to use check boxes. We need two boxes each with names that call the function.

<input type="checkbox" name="showone" id="showone" value="showone" onClick="toggle_hideme1('showone');"><br />
<input type="checkbox" name="showtwo" id="showtwo" value="showtwo" onClick="toggle_hideme2('showtwo');"><br />

If you want the boxes checked to start first swap the ‘newDisplay =’ lines, and use this.

<input type="checkbox" name="showone" id="showone" value="showone" onClick="toggle_hideme1('showone');" CHECKED><br />

As in my previous post you need to put what ever will be shown or hidden in a div class tag.

<div class="div_class_name" style="display: none;">

The style hides everything in the class until the box is checked.

That will start the boxed checked, when you un-check it the data in all div classes with that name will hide (remember the ‘div_class_name’? that’s what we are working with).

I wrote this up in just a couple minutes, so I truly help it makes scene. You can check out an example of how it works here.

Tags: , ,
Category: coding  |  Comment (RSS)  |  Trackback

2 Comments

  1. andy says:
    Saturday, August 29, 2009 at 01:15

    Thank you sir!!! This just saved my day!!!

  2. Caieta says:
    Saturday, July 14, 2012 at 14:11

    Thank you, this was exactly what I was looking for :)

Leave a Reply