Welcome to WebmasterWorld Guest from

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)

Junior Member

10+ Year Member

joined:Sept 26, 2005
votes: 0

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

<title>Hidden Div</title>
<script language="JavaScript">
function showstuff(boxid){

function hidestuff(boxid){

<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>

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)

Senior Member from US 

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

joined:Oct 17, 2005
votes: 14

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.

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members