title: Unable to show/hide using Javascript and CSS
body: <p>Following some examples Ive seen, I am trying to be able to click to show/hide a Div ID. Content is hidden but when I click AFC Playoff Race,
  nothing happens. Any ideas what I am doing wrong?</p>
  
  <p>CSS Style sheet includes:</p>
  
  <pre><code>.hidden { visibility: hidden; }
  .unhidden { visibility: visible; } 
  </code></pre>
  
  <p>Here is the javascript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    function unhide(divID) {
      var item = document.getElementById(divID);
      if (item) {
        item.className=(item.className=='hidden')?'unhidden':'hidden';
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the HTML Code:</p>
  
  <pre><code>&lt;div class="panel panel-afc nopad playoffs"&gt;
    &lt;div class="panel-heading"&gt;
      &lt;a href="javascript:unhide('afc-playoff-container');" rel="nofollow"&gt;AFC Playoffs&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="panel-body"&gt;
      &lt;div id="afc-playoff-container" class="hidden"&gt;
        &lt;div id="afc playoff"&gt;
          &lt;table class="data-table1" border="0" width="100%"&gt;&lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>