Overriding CSS style 'display:none' in javascript
- by jsarma
I'm trying to add a checkbox toggle that hides and shows list elements by changing their style display attribute from "none" to "inline", but it's not working. I'm setting the attribute's style to "display:none" in the CSS file. Then I set it to "display:inline" in javascript when someone checks a box. The javascript is successfully changing the element's property to inline, but for some reason the element remains invisible.
If I do the opposite, by setting the display to inline in the CSS and overriding it to none in the javascript, it works fine. I don't see why this would work one way but not the other.
I'm using chrome. Here is the code. Any feedback is appreciated.
CSS file:
#tabmenu li[status='disabled'] a, a.active, #disabled {
color: #777777;
background: #DDDDDD;
font: normal 1em Arial;
border: 1px solid black;
border-radius: inherit;
padding: 0px 5px 0px 5px;
margin: 0px;
text-decoration: none;
cursor:hand;
display:none;
}
HTML:
<ul id="tabmenu">
<li name='tab' id='tab1' selected='no' status='disabled'></li>
</ul>
JAVASCRIPT (from command line, or onchange of a checkbox)
tab = document.getElementById('tab1');
tab.style.display = 'inline';
