Refactor jquery animate

Question

J'utilise le plugin datepicker de here - L'exemple est au bas de la page.

Il est l'utilisation Animer jquery() comme ceci:

$('#widgetField>a').bind('click', function(){ 
    $('#widgetCalendar').stop().animate({height: state ? 0 : $('#widgetCalendar div.datepicker').get(0).offsetHeight}, 500); 
    state = !state; 
    return false; 
}); 

J'ai besoin d'une recommandation sur la façon de factoriser cela en une expansion accordian comme div. Je ne veux pas que le calendrier flotte, j'en ai besoin pour pousser le contenu div en-dessous.

Recommandations?

Answer 1

Mise à jour Réponse

Le widget flotte parce qu'il a une position: absolute; et un décalage de hauteur dans la fonction jquery.

Voir le css:

#widgetCalendar a un style, position: absolute. Vous aurez besoin de supprimer cela, ce qui va le faire fonctionner, mais ensuite il y a des problèmes de style supplémentaires qui peuvent tous être pris en charge avec les ajustements CSS.

Ou, vous pouvez essayer d'utiliser jQuery .slidedown:

$('#widgetCalendar').slideDown(); 

alors vous pas besoin de la hauteur de décalage.

Ce serait génial si vous pouviez faire un jsfiddle, car je suis incapable de tester sans voir ce que vous faites.

Edité - L'utilisateur n'utilise jQuery UI

Cela est dû à la nature de l'interface utilisateur jquery - le calendrier est une boîte de dialogue spécialisée. La boîte de dialogue jQuery UI est un popin. Mais, vous pouvez contrer ceci:

<script> 
$(function() { 
    $("#datepicker").datepicker(); 
}); 
</script> 

Afficher le datepicker intégré dans la page au lieu de superposition. Appelez simplement .datepicker() sur un div au lieu d'une entrée.