Welcome to WebmasterWorld Guest from 54.145.208.64

Forum Moderators: open

Message Too Old, No Replies

What am I doing wrong here? Hide/Show divs in JS

   
6:59 pm on Feb 10, 2011 (gmt 0)

5+ Year Member



Hello all!
I have 2 things that I want to show/hide using JS.


<html>
<head>
<title>Hidden Div</title>
<script language="JavaScript">
function showstuff(boxid){
document.getElementById(boxid).style.visibility="visible";
}

function hidestuff(boxid){
document.getElementById(boxid).style.visibility="hidden";
}</script>
</head>
<body>

<a href="#" onclick="showstuff('one'); hidestuff('two');">Show ONE</a>
<a href="#" onclick="showstuff('two'); hidestuff('one');">Show TWO</a>

<div id="one" style="display:none" >ONE.</div>
<div id="two" style="display:none">TWO.</div>
</body>
</html>


If I use it as it is I don't see anything!
If I don't use style="display:none" inside the divs, I see them both initially and I can hide/show each one depending on which link I press. But the thing is that I need both divs to be hidden in the first place, and when I click on ONE, to show TWO, when I click on TWO to hide ONE and show TWO etc. Each time 1 div should be visible, depending on which link we press. The other must disappear.
7:23 pm on Feb 10, 2011 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Your example is setting both the "display" property and the "visibility" property. You have inline code that sets display:none, which will totally remove the item as if it didn't exist, whereas visibility will leave an empty box in the space where the item is located.

Depending on which behavior is the desired behavior, use only display or only visibility, but not both.

Also, don't use the language attribute on the script tag. It's not needed, and invalid. Use type="text/javascript" instead, or nothing at all.