title: Overriding CSS style 'display:none' in javascript
body: <p>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. </p>
  
  <p>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.</p>
  
  <p>I'm using chrome. Here is the code. Any feedback is appreciated.</p>
  
  <p>CSS file:</p>
  
  <pre><code>#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;
  } 
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul id="tabmenu"&gt;       
      &lt;li name='tab' id='tab1' selected='no' status='disabled'&gt;&lt;/li&gt;      
  &lt;/ul&gt;
  </code></pre>
  
  <p>JAVASCRIPT (from command line, or onchange of a checkbox)</p>
  
  <pre><code>tab = document.getElementById('tab1');
  tab.style.display = 'inline';
  </code></pre>
  
  <p><strong>UPDATE:</strong> I know that I could just move the "display: none" out of the css and have it set to none on page load with javascript. But if I do it that way, it will be hiding them after page load, which means, on slower computers, the user could see them flash briefly into visibility. That's why I'm using css to set the initial state, then trying to override it when the box is checked or unchecked. </p>
  
  <p><strong>UPDATE 2:</strong> Let me emphasize that if I set the element to visible in css, then hide it on change of the check box, this code works fine. But if the element is initially set to invisible in css, the checkbox is not able to make the element visible. So it appears to be a problem where css "display: none" can't be overridden after page load, but css "display: inline" can.</p>