Response title
This is preview!
pb with autoHeight in Accordion
in Using jQuery
•
12 years ago
Hi there,
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> <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> <a href="#" class="button small">Centre</a> <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> <a href="#" class="button small">Centre</a> <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.
1
