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:

I'd like to be able to toggle the [+] on click to [-] and vis versa.
I'd like to be able to hide div.content
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.

Not to nag, but you would do it a lot easier with jquery-type library. Working with DOM in pure js is kinda pain in the ass. — Nikita Rybak
– Nikita Rybak, Commented Aug 9, 2010 at 20:41
aside: event handler attributes do not use javascript: prefixes; what you are actually doing there is defining a C-style label called ‘javascript’. No-one ever uses labels in JS. You're getting confused with javascript: URLs, which also should never be used. — bobince
– bobince, Commented Aug 9, 2010 at 20:51
It's generally considered a good thing to avoid inline event handler attributes anyway: consider making your scripting more ‘unobtrusive’ by binding from JavaScript instead. You can write <a class="toggler" href="#content1">, to point the destination of the link at the content it is referring to (which makes sense for non-JS browsers). Then in script at the end, scan the document for elements with class="toggler" and attach an event handler directly to the element objects instead of an attribute. The event handler can read this.href.hash to find out the ID of the element to show/hide. — bobince
– bobince, Commented Aug 9, 2010 at 20:53
Thanks for the info on the badness of javascript:. It does make more sense to do the #stuff way in the href. I'm just not competent enough at javascript to worry about that stuff yet. In due time. Its best to limit the error space while I'm still learning. — Abe Hendrick
– Abe Hendrick, Commented Aug 9, 2010 at 21:07
What if the content is not a block element? Than your toggle function is going to cause a lot more bugs. — epascarello
– epascarello, Commented Aug 9, 2010 at 21:31

KatieK · Accepted Answer · 2010-08-09 20:45:37Z

2

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.

answered Aug 9, 2010 at 20:45

KatieK

13.9k19 gold badges79 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Abe Hendrick Over a year ago

Thanks. So to select more specific h2s i could use this: document.getElementById("box1").getElementsByTagName(h2);? This seems right. I'll give it a try. Thanks again.

Abe Hendrick Over a year ago

I got my project to work, thank you. I ended up just hard coding the elems index; so i did away with the for loop. It helped me learn that the elems are ordered as they appear within the HTML code. Thanks again.

KatieK Over a year ago

Abe, yes, glad that you got it. Sorry I was away for a while. I think the trickiest thing here is learning how to work with the DOM. Good luck!

Collectives™ on Stack Overflow

Javascript: Basic Show Hide Functionality

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related