Hide jQuery Accordion while loading
- by zac
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 javscript.
