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';