Hiding/Showing extra content using Javascript

Question

I havent used Javascript in a while and I have almost forgotten it all but I would like to be reminded how to show and hide html div boxs to display hidden content by clicking on a text or such.

In this case I would like to have a hidden box filled with login information while the ahref link will be the indicator to tell the loginbox to appear or disappear and by knowing this I could easily apply it to the register area.

I would like to know how to do this or a pop up box sort of thing.

This is what I have so far: Could anyone help me with this now. I can't seem to get it work.

The toggle is

<a href="#" onclick="showStuff('signup'); return false;"> Login</a>

Showing content

<div class="signup" style="display: none;">
<p> test </p>
</div> 

Javascript is function showStuff(signup) { document.getElementById('signup').style.display = 'block'; }

Why won't this work

Answer 1

Looks like the issue with your code is that your div has a class as 'signup' not an id. try:

<div id="signup" style="display: none;">
<p> test </p>
</div> 

See this jsfiddle for a working example with an additional fix to how your function works. http://jsfiddle.net/aUQ6B/

Original Answer:

See: javascript hide/show element

Code to make note of is the following:

document.getElementById('myid').style.display 

Setting this to 'none' hides the element.
Setting it to 'block, 'inline' or whatever the original value was will show the element.