Question

I’m wondering how to show another div when a range of tabs in jQuery UI Tabs is active.

tabs-1 contains a small amount of text, while the other tabs 2-4 contain much more text, so those tabs – when active – extend far down the page. What I’d like to do is be able to populate the sidebar with more content in #myotherdiv when any of the tabs 2 through 4 are active.

So if tabs-3 is active, how do I also get another div, i.e. .extradiv to show outside the #tabs div in the #sidebar?

Do I hook into the active state of the tab with jQuery to show the .extradiv in #sidebar? Some other way?

4/26/11 answer below works

Basic jQuery UI tab structure

<div id="tabs">
<ul>
<li><a href="#tabs-1"></a></li>
<li><a href="#tabs-2"></a></li>
<li><a href="#tabs-3"></a></li>
<li><a href="#tabs-4"></a></li>
</ul>

<div id="tabs-1">
"short" content
</div>

<div id="tabs-2">
"long" content
</div>

<div id="tabs-3">
"long" content
</div>

<div id="tabs-4">
"long" content
</div>

</div>

Sidebar

<div id="sidebar" class="widget">

<div class="extradiv">content</div>

</div>

Answer 1

The load event handler only fires when the tab is loaded dynamically. Use the show event instead:

    $('#tabs').tabs({
        show: function (event, ui) {
            var height = $(ui.panel).height();
            if (height > 200) {
                $('#sidebar .extradiv').show();
            } else {
                $('#sidebar .extradiv').hide();
            }
        }
    });