CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-tabs
Jakotheshadows
Jakotheshadows

Reputation: 1515

jQuery-UI Collapsible Tabs can't collapse independently

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 });
})

Upvotes: 0

Views: 66

Answers (1)

Yogesh Sharma
Yogesh Sharma

Reputation: 2017

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>

Upvotes: 1

Related Questions