jQuery Accordion: divs with scrollbars not sliding nicely

Question

I am using the following code to get an accordion happening:

$(".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');

However, when clicking the h2 to affect the accordion, if one of the "accordion-content" divs has a scrollbar (css set to overflow:auto), the divs seem to be overlapping and not animating nicely. Is there a way that I can set "overflow:auto" to happen only after the div is in full sight? Or any other way around this? Thanks.

Answer 1

You could try using the changestart and change event which are fired pre and post animation. the ui.newContent should be the div in question.

Rough 2 second demo here.

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