title: Turning two elements visible/hidden in the same div
body: <p>I am having a problem turning one element on and the other off in the same div. It seems I create an object that is supposed to do this, and when I click on it, it hides the entire div instead of turning one element on and one off. What else do I need to add to make this work?</p>
  
  <h3>CSS</h3>
  
  <pre><code>#test1 {
      width:804px; margin-left:auto; margin-right:auto; height:250px; float:left; overflow:hidden; display:none;
  }
  
  #test2 {
      width:804px; margin-left:auto; margin-right:auto; height:250px; float:left; overflow:hidden; display:block;
  }
  
  .mydiv {
  
  }
  
  #test {
      width:804px; margin-left:auto; margin-right:auto; height:250px; float:left; overflow:hidden;
  }
  
  #labor{
      float:left; width:38px; height:125px;
  }
  
  #odc {
      float:left; width:32px; height:125px;
  }
  </code></pre>
  
  <h3>HTML</h3>
  
  <pre><code> &lt;div id="test"&gt;
   &lt;div class="mydiv" id="test1"&gt;
      &lt;script src="../../Dashboard/Charts/FusionCharts.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;div id="line3ChartContainer" style="display:normal"&gt;
          &lt;asp:Literal ID="Literal9" Visible="true" runat="server"&gt;&lt;/asp:Literal&gt;&lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="mydiv" id="test2"&gt;
      &lt;script src="../../Dashboard/Charts/FusionCharts.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;div id="popChartContainer"  style="display:normal"&gt;
          &lt;asp:Literal ID="Literal3" Visible="true" runat="server"&gt;&lt;/asp:Literal&gt;&lt;/div&gt;
   &lt;/div&gt;
   &lt;/div&gt;
  
   &lt;img src="../../images/labortab.png" id="labor" onmousedown="document.test1.visibility='false';document.test2.visibility='true';"/&gt;
   &lt;img src="../../images/odctab.png" id="odc" onmousedown="document.test1.visibility='true';document.line3ChartDiv.visibility='false';"/&gt;
  </code></pre>
  
  <p>Hope this is better looking.</p>