Ocultar acordeão jQuery ao carregar
Estou testando uma compilação de site com uma conexão lenta e notei que o jQuery Accordion permanece expandido por um longo período de tempo, até o restante do site ser carregado e, finalmente, entrar em colapso. Não é muito bonita. Eu queria saber como poderia mantê-lo recolhido durante o processo de carregamento e expandir apenas quando clicad
Estou trabalhando com a versão autônoma 1.6 do plug-in acordeã
A estrutura básica:
<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>
e o script
jQuery().ready(function(){
jQuery('#navigation').accordion({
active: 'false',
header: '.head',
navigation: true,
animated: 'easeslide',
collapsible: true
});
});
Tentei ocultar os elementos no CSS para impedir que eles aparecessem durante o carregamento, mas tudo o que conseguimos foi mantê-los sempre oculto
Talvez o problema esteja no CSS, tenho uma imagem de plano de fundo em cada um dos submenus:
#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;
}
Agradecemos antecipadamente por qualquer conselho sobre como deixar essa coisa mais suave e com o acordeão sempre em colaps
-edit - esqueci de mencionar que também espero uma solução que permita que a navegação ainda seja acessível para quem não tem Javascrip