Can't hide jquery ui's datepicker

Question

There are tons of questions and answers but I couldn't find what I am looking for.

I am showing the datepicker with a link click but can't hide it when user select a date. Please let me know if you have any suggestion. You can find the related code at http://jsfiddle.net/5qE8K/

    $("#calendar > a").unbind('click').bind('click', function(e){
        e.preventDefault();

        var calendar = $(this).parent();

        $("#content").datepicker({
            beforeShow: function(){
                $(".ui-datepicker").css({
                    'position'  :   'absolute',
                    'top'       :   (calendar.offset().top + calendar.height() + 4) + 'px',
                    'left'      :   (calendar.offset().left + calendar.width() - $(".ui-datepicker").outerWidth(true)) + 'px'
                });
            },
            onSelect: function(date, obj){
                calendar.children("div#selected-date").text(obj.selectedDay + '/' + (obj.selectedMonth+1) + '/' + obj.selectedYear);
                calendar.children("span").text(obj.selectedDay);
                $("#content").datepicker('hide');
            }
        });
    });

Answer 1

Calling 'hide' on an inline detepicker ( ie a datepicker attached to a element other than an input ) does nothing. Try calling destroy.

// ...
calendar.children("span").text(obj.selectedDay);
$("#content").datepicker('destroy');
// ...