Testcase: jquery.ui.tabs 1.9pre FX Tab Switching Bug

Testcase for a bug discovered in the new jquery.ui.tabs v1.9. When you use the fx and have nested tab containers, they function inappropriately because the parent element doesn't contain a height, thus the "toggle" doesn't simply show or hide, but toggles.

by highwayoflife

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<article id="main-tabs">
    <header>
        <ul>
            <li><a href="./request1" title="tab1">Tabs 1</a></li>
            <li><a href="./request2" title="tab2">Tabs 2</a></li>
            <li><a href="./request3" title="tab3">Tabs 3</a></li>
        </ul>
    </header>
    <section>
        <header>
            <h2>Header content for tab1</h2>
        </header>
        <div id="tab1">{incoming request1}</div>
    </section>
    <section id="sub-tabs" class="hide">
        <header>
            <h2>Header content for tab2</h2>
            <ul>
                <li><a href="./request2" title="tab2">Tab 2</a></li>
                <li><a href="./subnav/request2" title="subtab2">Subtab 2</a></li>
                <li><a href="./subnav/request3" title="subtab3">Subtab 3</a></li>
            </ul>
        </header>
        <div id="tab2">{incoming request2}</div>
        <div id="subtab2">{incoming subnav/request2}</div>
        <div id="subtab3">{incoming subnav/request3}</div>
    </section>
    <section class="hide">
        <header>
            <h2>Header content for tab3</h2>
        </header>
        <div id="tab3">{incoming request3}</div>
    </section>
</article>

CSS

.hide {
    display: none;
}

section {
    padding: 10px !important;
}

header h2 {
    margin-bottom: 10px;
}

JavaScript

var tab_options = {
    beforeActivate: function(event, ui) {
        ui.oldPanel.parent('section').hide();
        ui.newPanel.parent('section').show();
    }
}

$('#main-tabs').tabs(tab_options);
$('#sub-tabs').tabs();