title: toggle hidden : unhidden not working with JS in HTML/CSS?
body: <p><a href="http://jsfiddle.net/bDQt7/1/" rel="nofollow">http://jsfiddle.net/bDQt7/1/</a></p>
  
  <p>Toggle hidden : unhidden doesn't work, and I can't figure out why?</p>
  
  <p>html</p>
  
  <pre><code>&lt;a href="javascript:unhide('menu');"&gt;Toggle&lt;/a&gt;
  
  &lt;div id="top"&gt;
      &lt;div id="menu" class="hidden"&gt;
          hello
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.hidden {
      display: none;
  }
  .unhidden {
      display: block;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>function unhide(divID) {
      var item = document.getElementById(divID);
      if (item) {
          item.className = (item.className == 'hidden') ? 'unhidden' : 'hidden';
      }
  }
  </code></pre>