title: show/hide certain div on select of jQuery UI tabs
body: <p>I have a working jQuery UI tabs, the structure is similarly like this:</p>
  
  <pre><code>&lt;script&gt;
      $( "#tabs" ).tabs();
  &lt;/script&gt;
  
  &lt;div id="tabs"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#tabs-1"&gt;&lt;/a&gt;Tab 1&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tabs-2"&gt;&lt;/a&gt;Tab 2&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div id="tabs-1"&gt;
      &lt;!-- content of tab 1 --&gt;
    &lt;/div&gt;
    &lt;div id="tabs-2"&gt;
      &lt;!-- content of tab 2 --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="extra"&gt;
      &lt;!-- some contents here --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now, I wanted to hide the div extra when <strong>Tab 2</strong> is selected, while showing it when <strong>Tab 1</strong> is selected. I can't quite understand the event thing on jQuery UI tabs.</p>