title: jQuery Tools Tabs - Collapsible tab content on mouseout
body: <p>I'm currently using jQuery tools tabs plugin. I'm at a point where it works pretty well but I need some added functionality which isn't included. </p>
  
  <p>The functionality i'm looking for is when a tab is activated and the user moves their mouse outside of the tabs content area, the tab is collapsed. (Almost like a dropdown menu with css) </p>
  
  <p>I so far have the following code: </p>
  
  <pre><code>$('#main-content &gt; div').mouseleave(function() { 
      var api = $('.nav').data('tabs'); 
      if (api.getIndex() == $('.nav a').parent('li').index()) { 
          api.getCurrentPane().hide().removeClass('current'); 
      } 
  });
  
  $(".nav").tabs("#main-content &gt; div", {
      initialIndex: 5, 
      event: 'mouseover',
  });
  </code></pre>
  
  <p>The code only seems to work on the last tab and i'm not sure why. </p>
  
  <p>Demo: 
  <a href="http://www.edisonfordinsure.co.uk/other/portal/idea/" rel="nofollow">http://www.edisonfordinsure.co.uk/other/portal/idea/</a> </p>
  
  <p>Any help would be greatly appreciated. </p>