title: How can I show an element that has display: none in a CSS rule?
body: <p>I have a really simple external css stylesheet that has the following :</p>
  
  <pre><code>div.hideBox {
      display:none;
  }
  </code></pre>
  
  <p>So when the html page loads, the div with that class attribute 'hideBox' will not show on the page, which is what I want. But I the box to show/appear when a user clicks on a button on that same page. I tried to use the onclick event to do this, but the div won't show. </p>
  
  <p>So for example, the code would be :</p>
  
  <pre><code>&lt;script language="javascript"&gt;
  function showmydiv() {
  document.getElementById('mybox').style.display = "";
  }
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="mybox" class="hideBox"&gt;
  some output of text
  &lt;/div&gt;
  &lt;input type="button" name="ShowBox" value="Show Box" onclick="showmydiv()"&gt;
  </code></pre>
  
  <p>What's strange is that a setup similar to this works when I use <code>visibility:hidden; position:absolute;</code> and I can use a JavaScript function to show the <code>&lt;div&gt;</code>.</p>
  
  <p>What am I doing wrong here? </p>