title: javascript changing divs to display:none - prevent displaying divs before javascript runs?
body: <p>I have a function shoh() which is toggles the state of a div - either showing or hiding it. When a page is loaded, shoh($id) is repeatedly called for each div to hide on the page by changing the style to display:none. If the user wants to see the data in the hidden div, they click on a link with onClick="show($id)" to change the div style to display:block.This all works great. </p>
  
  <p>I want the page to work even if javascript is disabled, so I have to have the divs default to visible or else a user without javascript will never be able to see the data. The problem is that when the page loads, all the divs are displayed visible and the page needs to completely load before the divs are hidden. This is aesthetically poor and creates visual confusion as the page can take a couple of seconds to load. </p>
  
  <p>Is there any way to prevent the screen from displaying the divs until after the javascript has had a chance to run? I wouldn't mind display "Loading..." or something. Thanks in advance.</p>
  
  <pre><code>//toggle state of div - show OR hide - default is hidden
  function shoh(id, cmd) { 
  // if cmd is not blank, clicked on button to expand all or collapse all
  cmd = typeof cmd !== 'undefined' ? cmd : '';
  if (document.getElementById(id)){
      if ((document.getElementById(id).style.display == "none" || cmd=='show') &amp;&amp; cmd!=='hide'){
          //show
          document.getElementById(id).style.display = 'block';
          filter(("img"+id),'imgin');
          setCookie(window.location.pathname + ":" + id, "show", 365)
      } else {
          //hide
          document.getElementById(id).style.display = 'none';         
          filter(("img"+id),'imgout');
          deleteCookie(window.location.pathname + ":" +id);
      }   
  }   
  }
  </code></pre>