The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Sitepoint's Navigation Bar

Hey guys. I was wondering how to implement the + and - signs that Sitepoint employs in their navbar to collapse and expand link text. My teacher showed me a cursory example but he was in a rush so I didn't have time to copy down the code = /

From what I understand, you need 2 divs, and if its clicked the first time, make it inline, if it's clicked again, make its display none. I'm just not sure how to throw that into code! From what he showed me, it's a few lines long so not too troublesome, so I hope someone can be of assistance. Thanks!

Thanks 7stud! Well, the + and - thing can be seen on the navigation bar for the forums at links like PHP and Databases. I hate to be a bother, but is it possible that you can give me a walkthrough of that code? I love learning new stuff Thanks a lot for your time and help 7stud!

until they exist. The elements don't exist until after the page loads, so in the statement above, I used the onload event to assign the toggle() event handler function to the 'icon' onclick event. That statement is equivalent to this:

However, since I will never need to call the initialize() function again, it does not need to be a named function, so I used the shorthand form:

window.onload=function(){........};

When you assign named functions to events like I did, you use only the function name:

initialize

or

toggle

without the '()' operator. If you did this:

document.getElementById("icon").onclick=toggle();

then when that line is processed, the toggle() function would immediately execute, and the results would be assigned to the onclick event. That's not what you want. What you want is for nothing to happen when that line is processed, and only when the onclick event happens do you want the toggle() function to execute. The way you do that is by only using the function name.

The toggle() function uses what's called the DOM, to obtain the first and third <span>, and change their properties. The 'icon' <span> has its .nodeValue property, which is the text contained in the <span>, changed from '+' to '-', and the 'sub' <span> gets it's .className property changed from 'show' to 'hide', which determines the css style that applies to the <span>, and therefore whether it is visible or hidden.

Well W. Luke, I did a brief search before posting but only could come up with the folder/directory type of style, which wasn't really what I was interested in. Thanks Darchangel for the link to your former post as well!