title: jQuery UI Tabs go to specific div in tab
body: <p>I have basic tabs setup using JqueryUI (simplified to only the two tabs relevant)</p>
  
  <pre><code> &lt;div id="tabs"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#tabs-1"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#tabs-5"&gt;Benefits&lt;/a&gt;&lt;/li&gt;
  
          &lt;/ul&gt;
          &lt;div id="tabs-1"&gt;
              &lt;UCHome:UCHome runat="server" /&gt;
          &lt;/div&gt;
          &lt;div id="tabs-5"&gt;
              &lt;UCBenefits:UCBenefits runat="server" /&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the usercontrol for tabs-1 (simplified to the relevant code)</p>
  
  <pre><code>&lt;a class="benefitc" href="#benefitsmodularity"&gt;
       &lt;span&gt;Modularity&lt;/span&gt;
       &lt;asp:Image runat="server" ImageUrl="../Images/Benefits1.png"/&gt;&lt;/a&gt; 
  &lt;a class="benefitc" href="#benefitsflexibility&gt;
      &lt;span&gt;Flexibility&lt;/span&gt;&lt;asp:Image runat="server" ImageUrl="../Images/Benefits2.png" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>In the usercontrol for tabs-5 (again simplified)</p>
  
  <pre><code>&lt;div class="homecontent"&gt;
      &lt;div id="benefitsmodularity"&gt;
          &lt;h2&gt;
              (Modularity)&lt;/h2&gt;
          &lt;p&gt;
              Hello
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="homecontent"&gt;
      &lt;div id="benefitsflexibility"&gt;
          &lt;h2&gt;
              (Flexibility)&lt;/h2&gt;
          &lt;p&gt;
               World
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>homecontent class is simply for styling.</p>
  
  <p>Now basically, I want to redirect from tabs-1 to tabs-5 when a user clicks an image on tabs-1 AND I want it to go to the div relevant to the image. For example if the user clicks Benefits2.png then I want it to go to tabs-5 and have focus on .</p>
  
  <p>So far I have in the document.ready</p>
  
  <pre><code>var $tabs = $("#tabs").tabs();
  
  $('.benefitc').click(function () { // bind click event to link
     $tabs.tabs('select', 4); // switch to tab
     return false;
  });
  </code></pre>
  
  <p>This gets me to the tab correctly but I can't figure out how to get to the correct div. Note, all the clicks should take me to tabs-5 which is index 4.</p>
  
  <p>Any help would be much appreciated. Please let me know if I haven't been clear enough on the question.</p>