question about checking the status of a style

[gerg]

I've got the following script that toggles the visibility of a <form>
from Display: none, to Display: Block. Works great. But when I try to
first run a check like:

function show(id){

var el = document.getElementById(id);

if(el.style.display == 'none'){

el.style.display = 'visible';

}
else
{
el.style.display = 'none';
}

}

it doesn't work. The CSS and HTML is below:

The CSS looks like this:

#myform {
display: none;
}


The html looks like this:

<div id="login">
<h1><a href="#" onclick="show('myform')">Login</a></h1>
</div>
<div id="loginform">
<form id="myform" name="login">
UserName: <input name="username" type="text" size="15" /><br />
PassWord: <input name="" type="password" />
</form>
</div>

I admit to total newbieness so I'm still in the learning curve. I've
googled various things but haven't been able to figure this out. Thanks
again in advance.

greg g.

 

[RobG]

I've got the following script that toggles the visibility of a <form>
from Display: none, to Display: Block. Works great. But when I try to
first run a check like:

function show(id){

var el = document.getElementById(id);

if(el.style.display == 'none'){

el.style.display = 'visible';

}
else
{
el.style.display = 'none';
}

}

it doesn't work. The CSS and HTML is below:

The style object represents the style applied to an element either in
line (in the HTML) or by script, it doesn't show what has been set by
inheritance or style sheet or whatever.

The usual method is to toggle the display property between 'none' and
''. "Visible" is not a valid value for the display property:

<URL:http://www.w3.org/TR/CSS21/propidx.html>

try:

function show(id)
{
var el = document.getElementById(id);

if (el && el.style){
el.style.display = ('none' == el.style.display)? '' : 'none';
}
}

You need feature detection for getElementById too, but you may have done
that elsewhere.

The CSS looks like this:

#myform {
display: none;
}

It's not a good idea to rely on script making things visible, if it's
disabled or not available, and CSS is, the user will never see the
hidden element.

[...]

I admit to total newbieness so I'm still in the learning curve. I've
googled various things but haven't been able to figure this out. Thanks
again in advance.

Search the archives, it's been posted many, many times.

Here's one from less than 2 weeks ago, search for "display none toggle":

<URL:http://groups.google.com.au/group/c...?q=style.display+none&rnum=5#68dadf4e4057887b>