jQuery UI Tabs - Multiple instances linking to same DIV set

Question

Note: I want to use .tabs() and avoid NOT using .tabs(), and writing everything 
separately to handle the fades and tab selections like others have found.

As the title suggests, I want to have a list of tabs in two seperate positions on the page, but I want them to work together with the same data.

The problem is that setting up two ul's with nav classes causes conflicts and so two tabs can be selected at once: one on the left and one on the right.

See how each tab set isn't working together and can be selected separately?

Code for a working single set of tabs

HTML

<div id="content">
    <!-- Tab data gets inserted here -->
    <div id="overlay"><div class="overlay"></div></div>

    <!-- First Tab Set -->
    <!-- NOTE: This will appear on the left -->
    <div class="navigation nav-left">
        <ul class="nav">
            <li>Link1</li>
            <li>Link2</li>
        </ul>
   </div>

   <!-- Data for the tabs - this works! -->
   <div id="container">
       <!-- Link 1 Tab -->
       <div>This is data for Link 1</div>
       <div>This is data for Link 2</div>
   </div>
</div>

The jQuery

$(function() {
    $("ul.nav").tabs("div#container > div", {
    effect: 'fade',
    fadeOutSpeed: "500"});
});

As you can see, the above jQuery sets tabs up for ul.nav linking to each div within #container individually. This single set of tabs on the left hand side of my page works!

The Hard Part

How do I change this to allow for two sets of tabs on my page?

I want a second <div class="navigation nav-right"> -- note the nav-right to hold these tabs on the right hand side of the page.

This second set of tabs must work alongside the first set, so only one tab can be active at once, and cancels out other tab selections.

My code causing the two tab sets concurrency problem

HTML

    <!-- First Tab Set -->
    <!-- NOTE: This will appear on the left -->
    <div class="navigation nav-left">
        <ul class="nav">
            <li>Link1</li>
            <li>Link2</li>
        </ul>
   </div>

   <!-- Second Tab Set (Attempt) -->
   <!-- NOTE: I want nav-right here -->
   <div class="navigation nav-right">
        <ul class="nav">
            <li>Link1</li>
            <li>Link2</li>
        </ul>
   </div>

   <!-- Data for the tabs -->
   <div id="container">
       <!-- Link 1 Tab -->
       <div>This is data for Link 1</div>
       <div>This is data for Link 2</div>
       . . .
       <div>This is data for Link 5</div>
   </div>

Final Thought

I was rather hoping to not have to write my own jQuery Tabs function with fadeIn() and fadeOut() - what can I do to make this work?

Answer 1

According to the vendor of .tabs() - he "can't be bothered" with updating for multiple instances of tabs linking to the same DIV set.

My only option was to roll my own code, completely doing away with .tabs() and performing my own .fadeOut(), .fadeIn() and .load() functions combined within a large function call.

The upside of this is that I know exactly how it all works and can add to it easily in the future, and I recommend spending a little time (it's not going to take too long) to do it yourself.

If the owner ever does decide to include this functionality, I will update my post, but as of early 2013, there isn't currently a way to use the .tabs() plugin in this way.