o problema básico é:
você implementa um slideToggle () básico, mas ele pula antes de chegar ao fundo. É baseado em jQuery calculando a altura errada conforme passa pela animação.
Uma solução rápida é simplesmente adicionar uma largura fixa ao elemento. Mas isso não ajuda com sites responsivos!
Depois de muita tentativa e erro, descobri que, se adicionasse uma função each para calcular a altura de cada um dos meus elementos, isso iria classificar tudo. Mas também deu errado na altura! Pesadelo!
O que descobri é que, se não tivesse meus elementos configurados para exibir: nenhum no início, ele deslizaria perfeitamente com as alturas corretas. Então eu criei essa função minúscula que calcula as alturas e depois esconde os elementos. Também é útil para aqueles sem js, pois os elementos estarão visíveis.
$('.your-element').each(function() {
$height = $(this).height();
$(this).css('height', $height);
$(this).hide();
});
$('.your-handler').click(function () {
$(this).next().slideToggle('slow');
$(this).toggleClass('active');
});