I have the following code:

CSS:

    
.box, .boxHide {
    border:#CCC solid 1px;
    width:300px;}
    
.boxHide {
    display:none;}

Javascript

function appear (element)
    {
        var element = document.getElementById(element);
        var elementStyle = element.style;
        
        if (elementStyle.display == 'none')
            {
                // make the element visible
                elementStyle.display = "block";
            }
        
        else
            {
                //make the element invisible
                elementStyle.display = "none";
            }
    }

But I seem to have to click twice in order for it to work properly. Ive figured out [through using the alert function to show the elements 'display:' property from the CSS] that nothing seems to be assigned to it. The alertbox just shows up blank.

Then, since its not equal to 'none'; is assigned 'none' to its display. Therefore it starts working after 2 clicks.

But I just cant figure out why element.style.display isnt equal to 'none' when Ive set it in the CSS??

Had this problem myself before, to fix it I removed the display from css and added it into the style tag and it worked.

this line:

if (elementStyle.display == 'none')

is looking for the inline attribute style="display: none;". It doesn't know about the style in your external stylesheet when you check it this way, which is why you must click it twice for it to see that it is there.

***Edit*** oops, you beat me to it. Good job.

ahhhh so it won't work with an external stylesheet? Thats horrible!

The way I deal with it, to avoid writing inline styles to start out, is to load them dynamically on page load from within the script, or else (normally) to place the needed styles within classes, and simply switch the styles with the className method.

I get ya, thanks. Seems a bit wierd the way it doesnt work, after all; Im sure it worked when I used to use the visibility style?? ah well