Javascript won't overwrite CSS display property

I have a DIV that is set do display:none from CSS and it's supposed开发者_JAVA百科 to be made visible (style.display = '';) at some point by javascript.

The problem is that if I put the display:none in the CSS file the javascript does not seem to have any effect. I have also tried changing the background color instead of the display property, and that works.

I have the code running here (just press the edit link).

I really thank you for taking the time to look into this.

Set it to block or inline using Javascript.

Writing style.display = "" will clear any display set in the inline style, and cause it to revert to whatever it inherited from CSS.

Alternatively, you can change the element's className using Javascript so that the CSS rule no longer applies.

This is because style.display = '' only affects inline styles on an element. It doesn't change the style sheet.

You should set it to whatever display you need:

style.display = 'block';

or add a class that represents the style you want.

other way to hide content is use opacity=0 and to again make visible use opacity=1 thats it....!!!