Question

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.

I am working with the standalone 1.6 version of the accordion plugin.

The basic structure :

<div class='sidebar'>     <ul id='navigation' class='ui-accordion-container'>         <li><a class='head' href='#'>1</a>             <ul class='sub'>                 <li><a href='#'>1a</a></li>                 <li><a href='#'>2a</a></li>             </ul>           </li>     </ul> </div> 

and the script

jQuery().ready(function(){     jQuery('#navigation').accordion({          active: 'false',          header: '.head',          navigation: true,         animated: 'easeslide',         collapsible: true     });      }); 

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.

Maybe the problem is in the CSS I have a background image in each of the sub menus:

#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; } 

Thanks in advance for any advice on how to have this thing run a little smoother and having the accordion always collapsed.

-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.

Answer 1

I do this first thing with all my sites: Right after the body tag, put a script tag with this javascript:

jQuery('body').addClass('js'); 

This gives you a style hook for any elements that will look different in some way when Javascript enabled, and it happens immediately.

There are good solutions to the rest of your problems in the other answers. You’ll just need two ‘base’ styles instead of one:

#navigation ul li { /*open styles for no javascript*/ } body.js #navigation ul li { /*closed styles for pre dom.ready*/ } 

… and then re-open before applying the accordion on dom.ready.

EDIT: If you’re loading jQuery at the end of the page (or aren’t using jQuery), you can use this straight javascript version:

<script type='text/javascript'>     var b = document.getElementsByTagName('body')[0];     b.className+=b.className?' js':'js'; </script>