jQuery accordéon: divs avec des barres de défilement ne glissant pas bien

Question

J'utilise le code suivant pour obtenir un accordéon qui se passe:

$(".accordion h2").eq(2).addClass("active"); 
$(".accordion-content").eq(2).show(); 
$(".accordion h2").click(function(){ 
    $(this).next(".accordion-content").slideToggle("slow") 
    .siblings("div:visible").slideUp("slow"); 
    $(this).toggleClass("active"); 
    $(this).siblings("h2").removeClass("active"); 
}); 
$("div.accordion-content").hide(); 
$("h2#open").trigger('click'); 

Cependant, en cliquant sur le h2 d'affecter l'accordéon, si l'un des « accordéon contenu "divs a une barre de défilement (css mis à overflow: auto), les divs semblent se chevaucher et ne pas bien animer. Y at-il un moyen que je puisse définir "débordement: auto" pour se produire seulement après que la div est en pleine vue? Ou de toute autre manière autour de cela? Merci.

Answer 1

Vous pourriez essayer d'utiliser l'événement changestart et change qui est déclenché avant et après l'animation. le ui.newContent devrait être le div en question.

rugueux 2 secondes démonstration here.

$('.selector').accordion({ 
    changestart: function(event, ui) { 
     ui.newContent.css('overflow' , 'hidden'); 
    }, 
    change: function(event, ui) { 
    ui.newContent.css('overflow' , 'auto'); 
    } 
});