Question

I am using the datepicker plugin from here – The example is on the bottom of the page.

It is utilizing jquery animate() like this:

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

I need a recommendation on how to refactor this into an accordian-like expanding div. I do not want the calendar to float, I need it to push the div content below it down.

Recommendations?

Answer 1

Updated Answer

The widget floats because it has a position:absolute; and a height offset in the jquery function.

See the css:

#widgetCalendar has a style, position:absolute. You will need to remove that, which will make it work, but then there are additional styling issues that can all be taken care of with css adjustments.

Or, you can try using jQuery .slidedown:

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

Then you wouldn’t need the height offset.

It would be great if you could do a jsfiddle, as I am unable to test without seeing what you are doing.

Edited – user not using jQuery UI

This is due to the nature of jquery UI – the calendar is a specialized dialog. The jQuery UI dialog is a popin. But, you can counteract this:

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

Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.