jQuery Forum

I've got a problem with the accordion i'm using. I explain, I want to use accordion with autoHeight set as false, not to have a fixed height on every tab.

my problem is, on the page load, the first tab is open with a big space under the content, like if the height was set with the contents of the other tabs. Then if I click on another tab, the other tab height is ok, and if I go back to the first tab, then, it takes the good height without any space...

here is the code for my accordion :

$(document).ready(function() {

    $("#accordion").accordion();

$("#accordion").accordion({ autoHeight: false });

$("#accordion").accordion({clearStyle: true });

});

and here is a sample of my html :

<div id="accordion">

<h3><a href="#"><img src="img/image-centrale-titre.png" /></a></h3>

<div id="tab-1" style="height: 150px;">

<span class="separator"></span>

<p>

<img src="img/vignette.png" class="floatl" />

<div class="button-block">

<a href="#" class="button medium">Modifier</a>

<a href="#" class="button-active medium">Recadrer</a>

</div>

<br clear="all" />

</p>

</div>

<h3><a href="#"><img src="img/image-fond-titre.png" /></a></h3>

<div id="tab-2">

<span class="separator"></span>

<p>

<ul class="subtitle"><li>image</li></ul>

<img src="img/vignette.png" class="floatl" />

<div class="button-block">

<div class="bt"><a href="#" class="button medium">Modifier</a></div>

<div class="bt"><a href="#" class="button-active medium">Masquer</a></div>

</div>

<br clear="all" />

<div div class="unavailable"> <!-- Ce DIV unavailable est là pour Grisé les boutons -->

<span class="separator"></span>

<ul class="subtitle"><li>taille de l'image</li></ul>

<a href="#" class="button small">Originale</a>&nbsp;&nbsp;<a href="#" class="button-active small">100%</a>

<span class="separator"></span>

<ul class="subtitle"><li>position verticale</li></ul>

<a href="#" class="button small">Haut</a>&nbsp;&nbsp;<a href="#" class="button small">Centre</a>&nbsp;&nbsp;<a href="#" class="button-active small">Bas</a>

<span class="separator"></span>

<ul class="subtitle"><li>position horizontale</li></ul>

<a href="#" class="button small">Gauche</a>&nbsp;&nbsp;<a href="#" class="button small">Centre</a>&nbsp;&nbsp;<a href="#" class="button-active small">Droite</a>

</div>

</p>

</div>

</div>

I'm sorry for my poor french and I thank you all to have a look...

Xavier.