title: Show another div on active tab in jQuery Tabs UI
body: <p>I'm wondering how to show another div when a range of tabs in jQuery UI Tabs is active.</p>
  
  <p>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 #<code>myotherdiv</code> when any of the tabs 2 through 4 are active.</p>
  
  <p>So if tabs-3 is active, how do I also get another div, i.e. .extradiv to show outside the <code>#tabs</code> div in the #sidebar?</p>
  
  <p>Do I hook into the active state of the tab with jQuery to show the <code>.extradiv</code> in #sidebar? Some other way?</p>
  
  <p><strong>4/26/11 answer below works</strong></p>
  
  <p><strong>Basic jQuery UI tab structure</strong></p>
  
  <pre><code>&lt;div id="tabs"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#tabs-1"&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#tabs-2"&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#tabs-3"&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#tabs-4"&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="tabs-1"&gt;
  "short" content
  &lt;/div&gt;
  
  &lt;div id="tabs-2"&gt;
  "long" content
  &lt;/div&gt;
  
  &lt;div id="tabs-3"&gt;
  "long" content
  &lt;/div&gt;
  
  &lt;div id="tabs-4"&gt;
  "long" content
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Sidebar</strong></p>
  
  <pre><code>&lt;div id="sidebar" class="widget"&gt;
  
  &lt;div class="extradiv"&gt;content&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>