Collapsible, resizable jQuery-ui Tabs widget

I've been trying to create a set of tabs that is collapsible and also resizable. The problem I'm having is that after resizing (dragging top edge in demo) when you click the active tab to close it, the content disappears but it the tabs container stays the same size instead of shrinking to fit just the tab bar.

What's the trick to making the tabs container shrink after it's bee开发者_如何学Pythonn resized?

I tracked this down using Firefox's Web Developer Toolbar. I did "View Generated Source" before and after resizing and ran diff on the output. Resizing adds a style attribute to the affected element:

style="top: 226px; left: 0px; width: 1272.87px; height: 591.867px;"

To account for this I added a handler for the tabsselect event. It stores top and height into data attributes when collapsing the div and then removes them. When showing a tab it restores the settings from the data attributes.

select: function(event, ui) {
    if ($tabs.tabs("option", "selected") == ui.index) {
        // we're collapsing the visible tab
        if ($tabs.css("top")) {
            $tabs.data("top", $tabs.css("top"));
            $tabs.data("height", $tabs.css("height"));
            $tabs.css("top", "");
            $tabs.css("height", "");
        }
    }
    else if (ui.index == -1) {
        // we're about to show a tab
        if ($tabs.data("top")) {
            $tabs.css("top", $tabs.data("top"));
            $tabs.css("height", $tabs.data("height"));
        }
    }
}