How can I show an element that has display: none in a CSS rule?

Question

I have a really simple external css stylesheet that has the following :

div.hideBox {
    display:none;
}

So when the html page loads, the div

Answer 1

I can see that you want to write you own short javascript for this, but have you considered to use Frameworks for HTML manipulation instead? jQuery is my prefered tool for such a task, eventhough its an overkill for your current question as it has SO many extra functionalities.

Have a look at jQuery here

Answer 2

Because setting the div's display style property to "" doesn't change anything in the CSS rule itself. That basically just creates an "empty," inline CSS rule, which has no effect beyond clearing the same property on that element.

You need to set it to something that has a value:

document.getElementById('mybox').style.display = "block";

What you're doing would work if you were replacing an inline style on the div, like this:

<div id="myBox" style="display: none;"></div>

document.getElementById('mybox').style.display = "";

Answer 3

try setting the display to block in your javascript instead of a blank value.

Answer 4

document.getElementById('mybox').style.display = "block";