title: Hide jQuery Accordion while loading
body: <p>I am testing a site build with a slow connection and I noticed the jQuery Accordion stays expanded for a long time, until the rest of the site is loaded, and then finally collapses.  Not very pretty.  I was wondering how I could keep it collapsed through the loading process and only expand when clicked.</p>
  
  <p>I am working with the standalone 1.6 version of the accordion plugin.</p>
  
  <p>The basic structure :</p>
  
  <pre><code>&lt;div class="sidebar"&gt;
      &lt;ul id="navigation" class="ui-accordion-container"&gt;
          &lt;li&gt;&lt;a class="head" href="#"&gt;1&lt;/a&gt;
              &lt;ul class="sub"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;1a&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;2a&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt; 
           &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the script</p>
  
  <pre><code>jQuery().ready(function(){
      jQuery('#navigation').accordion({ 
          active: 'false', 
          header: '.head', 
          navigation: true,
          animated: 'easeslide',
          collapsible: true
      });     
  });
  </code></pre>
  
  <p>I tried to hide the elements in the CSS to keep them from appearing while loading but all that achieved is in having them always hidden. </p>
  
  <p>Maybe the problem is in the CSS I have a background image in each of the sub menus:</p>
  
  <pre><code>#navigation{
      margin:0px;
      margin-left: 10px;
      padding:0px;
      text-indent:0px;
      font-size: 1.1em;
      width:200px;
      text-transform: uppercase;
      padding-bottom: 30px;
  } 
  #navigation ul{
      border-width:0px;
      margin:0px;
      padding:0px;
      text-indent:0px;
  }
  #navigation li{
      list-style:none outside none;
  }
  #navigation li ul{
      height:185px; overflow:auto;
  }
  #navigation li ul.sub{
      background:url('../images/sub.jpg') no-repeat;
      dispaly: block;
  }
  #navigation li li a{
      color:#000000;
      display:block;
      text-indent:20px;
      text-decoration: none;
      padding: 6px 0;
  }
  #navigation li li a:hover{
      background-color:#FFFF99;
      color:#FF0000;
  }
  </code></pre>
  
  <p>Thanks in advance for any advice on how to have this thing run a little smoother and having the accordion always collapsed.</p>
  
  <p>-edit - I forgot to mention that I am also hoping for a solution that will allow the nav to still be accessible for those without Javascript.  </p>