homepage Welcome to WebmasterWorld Guest from 23.22.194.120
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

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




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

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.

 

Fotiman




msg:4265322
 7:23 pm on Feb 10, 2011 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved