Javascript: Basic Show Hide Functionality

Question

I'm just starting to learn Javascript; I do however have experience in programming using the C family of languages.

I'm basically trying to get a grasp on how the getElementById() function families work. To do this I'm trying to create a basic show/hide panel.

<div>
   <div id="box1">
      Title 
      <span class="time">Time</span>
      <span class="else" style="display:none;">Something Else</span>
      <a class="icon" href="#" OnClick="javascript:toggle('box1');">[-]</a>
      <div class="content">Content</div>
   </div>
</div>

Here is what I have so far for code:

function toggle(whichLayer)
    {
        var elem, vis;

        if (document.getElementById) // this is the way the standards work
        {
            elem = document.getElementById(whichLayer);
        }

        vis = elem.style;

        // if the style.display value is blank we try to figure it out here
        if (vis.display == '' && elem.offsetWidth != undefined && elem.offsetHeight != undefined)
        {
            vis.display = (elem.offsetWidth != 0 && elem.offsetHeight != 0) ? 'block' : 'none';
        }

        vis.display = (vis.display == '' || vis.display == 'block') ? 'none' : 'block';       
    }

It currently just shows and hides the box1 div which is all the code is supposed to do. Here is what I would like to be able to do:

1. I'd like to be able to toggle the [+] on click to [-] and vis versa.
2. I'd like to be able to hide div.content
3. I'd like to be able to toggle of the span from time visible to the other one and vis versa.

I can think about how to do this in pseudo code, but I don't know javascript well enough.

OnClick(string divId)
{
   if (divId.Hide)
   { 
      divId.span.else.display = block;
      divId.span.time.display = none;

      divId.a.icon.text = "[+]";

      divId.div.content.display = none;
   }
   else //Show
   {
      divId.span.else.display = none;
      divId.span.time.display = block;

      divId.a.icon.text = "[-]";

      divId.div.content.display = block;
   }
}

I guess the part that I'm stuck on is where I select the classes inside of the id="box1" div. I don't know how to interate through them by class name. I'm found stuff using google on how to do a getElementByClass() implementation because JS doesn't have one, but its over my head.

Any help would be greatly appreciated.

Answer 1

Most recent browsers support document.getElementsByClassName. IE8 does not. (http://www.quirksmode.org/dom/w3c_core.html#t11) Most JavaScript libraries do offer a simple way to select elements by class, but they each have their own pros and cons.

If you don't want to use a JavaScript library (Which is fine; there are great reasons for not using additional libraries.), you could do something like this:

elems = document.getElementsByTagName("h2");

for ( i=0; i<elems.length; i++ )
{
if ( elems[i].className == "myAwesomeClass" )
   { //  Do whatever stuff needs to happen to the class
     elems[i].style.color="red"; 
     }
}

In the above code, I've assumed that each element with the desired class has the same tag. If necessary, you could do document.getElementsByTagName("*") to select all tags, but that would probably take longer for the browser to process.