Switch all jQuery tabs on a page

Question

I'm working with tabs in jQuery to show code segments in different languages (C# and Javascript). When user clicks on one of the tabs, I want all the tabs to switch to the respective language. For example if the user clicks on the Javascript tab, all the other code segments will switch to the Javascript tab.

Here is the jsfiddle link to what I'm doing. Here is my code below:

HTML:

  < !-- Tab Set 1 -->
  <div class="tabs">
    <ul>
        <li><a href="#tabs-1">C#</a>
        </li>
        <li><a href="#tabs-2">Javascript</a>
        </li>
    </ul>
    <div id="tabs-1"> <pre class="prettyprint">Some C# code</pre>

    </div>
    <div id="tabs-2"> <pre class="prettyprint">Some Javascript Code</pre>

    </div>
  </div>

  < !-- Tab Set 2 -->
  <div class="tabs">
    <ul>
        <li><a href="#tabs-1">C#</a>
        </li>
        <li><a href="#tabs-2">Javascript</a>
        </li>
    </ul>
    <div id="tabs-1"> <pre class="prettyprint">Some C# code</pre>

    </div>
    <div id="tabs-2"> <pre class="prettyprint">Some Javascript Code</pre>

    </div>
  </div>

Javascript:

$(document).ready(function () {
    $("div.tabs").tabs();
});

I thought by making my tabs have the same link they would switch whenever one is clicked, but that doesn't seem to work. Any suggestions on how to do this?

Answer 1

I think this is what you need.

$("div.tabs").tabs({
  activate: function( event, ui ) {
    var tabIndex = $(this).tabs('option', 'active');
    $("div.tabs").tabs({active:tabIndex});
  }
});

http://jsfiddle.net/XBLAY/3/

When you select one tab in one tab group, all tab groups select that tab.

Edited the URL to go to the working jsfiddle site.