Show another div on active tab in jQuery Tabs UI

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 th开发者_Python百科e 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>

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

Fred's suggestion seems to work. You might mis-configured your css? See the demo here: http://jsbin.com/ateru6/5

You can look at the source here: http://jsbin.com/ateru6/5/edit

JavaScript:

$('#sidebar .extradiv').hide();

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

CSS:

  #tabs
  {
    width: 400px;
    margin-left: 6em;
  }

  #sidebar
  {
    position: fixed;
    top: 1em;
    left: 0;
    width: 5em;
    border: 2px solid gray;
    padding: 0.5em;
  }

  #sidebar .extradiv
  {
    color: blue;
  }

  #tabHeight
  {
    overflow: hidden;
    color: red;
    text-overflow: ellipsis;
   }

Add load event handler and check which tab is being loaded (or the size of the tab) if you want to make it more dynamic. Add the extra content when that tab is chosen or the tab size exceeds a certain threshold. See the documentation on the jQuery UI site for more examples of how to add event handlers for the Tab widget.

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

This works:

try and see the red div when you go on tab 3

http://jsfiddle.net/Ln4L7/2/