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

`document.getElementById('element-id').style.display = 'none';` and `document.getElementById('element-id').style.display = 'block|inline|etc';` — jraede, Jun 21 '13 at 00:20
possible duplicate of [javascript hide/show element](http://stackoverflow.com/questions/6242976/javascript-hide-show-element) — TimWolla, Jun 21 '13 at 00:42

score 0 · Answer 1 · edited May 23 '17 at 10:32

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.

Hiding/Showing extra content using Javascript

1 Answers1