title: How do I hide an HTML element before the page loads using jQuery
body: <p>I have some JQuery code that shows or hides a div.</p>
  
  <pre><code>$("div#extraControls").show();   // OR .hide()
  </code></pre>
  
  <p>I initially want the div to be not visible so I used:</p>
  
  <pre><code>$(document).ready(function() {
      $("div#extraControls").hide();
  });
  </code></pre>
  
  <p>However, on the browser, the content loads visible for a second before disappearing, which is not what I want.</p>
  
  <p>How do I set the hide the element before the page loads whilst keeping the ability to show hide it dynamically with a script?</p>