jQuery-UI可折叠选项卡不能独立折叠

Question

I'd like to be able to create two or more collapsible tab widgets. However, when I try even a very simple case, collapsing a tab in the first widget will "wiggle" the second widget around undesirably. Am I doing something wrong in this example to cause this? Is this a bug? Does anyone know how I can make these tabs collapse independently?

To produce the issue I'm talking about, collapse one of the tabs in the first widget. When you do so, you will see the second widget move a distance equal to the height that was collapsed in the first widget.

fiddle: http://jsfiddle.net/KP2s8/3/

HTML:

<h2>Collapsible Tabs Bug</h2>
<div style="height: 800px;"> 
    <div id="tabs_a" style="width: 300px;">
        <ul>
            <li><a href="#tabs_a-1">One</a></li>
            <li><a href="#tabs_a-2">Two</a></li>
            <li><a href="#tabs_a-3">Three</a></li>
        </ul>
        <div id="tabs_a-1">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
        <div id="tabs_a-2">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
        <div id="tabs_a-3">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
    </div>

    <div id="tabs_b" style="width: 300px; float: right;">
        <ul>
            <li><a href="#tabs_b-1">One</a></li>
            <li><a href="#tabs_b-2">Two</a></li>
            <li><a href="#tabs_b-3">Three</a></li>
        </ul>
        <div id="tabs_b-1">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
        <div id="tabs_b-2">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
        <div id="tabs_b-3">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
    </div>
</div>

Javascript:

$(document).ready(function () {
        $('#tabs_a').tabs({ collapsible: true }).draggable({ snap: true });
        $('#tabs_b').tabs({ collapsible: true }).draggable({ snap: true });
})

Answer 1

Hey Please see Demo

<h2>Collapsible Tabs Bug</h2>
<div style="height: 800px;"> 
    <div id="tabs_a" style="width: 300px; float:left;">
        <ul>
            <li><a href="#tabs_a-1">One</a></li>
            <li><a href="#tabs_a-2">Two</a></li>
            <li><a href="#tabs_a-3">Three</a></li>
        </ul>
        <div id="tabs_a-1">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
        <div id="tabs_a-2">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
        <div id="tabs_a-3">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
    </div>

    <div id="tabs_b" style="width: 300px; float: right;">
        <ul>
            <li><a href="#tabs_b-1">One</a></li>
            <li><a href="#tabs_b-2">Two</a></li>
            <li><a href="#tabs_b-3">Three</a></li>
        </ul>
        <div id="tabs_b-1">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
        <div id="tabs_b-2">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
        <div id="tabs_b-3">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
    </div>
</div>