ktsirig Posted February 10, 2011 Share Posted February 10, 2011 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. Quote Link to comment Share on other sites More sharing options...
iPixel Posted February 10, 2011 Share Posted February 10, 2011 what you need to do is create the 2 divs with display: none; then use javascript and say document.getElementById("idname").style.display = 'block'; Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.