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

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.

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

ktsirig

Fotiman

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week