jQuery Tools Tabs: Multiple, Different Instances

Question

Using jQuery Tools Tabs, I am trying to instantiate multiple instances of tabs, using several calls of .tabs().

In the official documentation, they have examples of creating multiple instances of tabs (http://flowplayer.org/tools/demos/tabs/multiple.html). Here, however, it's essentially multiple copies of the same tab/pane setup, same in appearance, css, and html (essentially).

My current setup looks like:

$("#tabs-1").tabs("#panes-1 > .pane-1");
$("#tabs-2").tabs("#panes-2 > .pane-2");

HTML:

<ul id="tabs-1">
  <li>tab 1</li>
  ...etc
</ul>

<div id="panes-1">
  <div class="pane-1">
     <ul id="tabs-2">
      <li>tab 1</li>
      ...etc
    </ul>
    <div id="panes-2">
      <div class="pane-2">Pane Content</div>
      ...etc
    </div>
  </div>
  ...etc (more .pane-1 panes)
</div>

What I want is the Tabs functionality, for two different sets of Tabs and Panes; different from each other in their DOM placement and appearance, and one is nested inside the other.

Each function in the above example works fine on it's own. If both are called, only one instance of Tabs works (whichever is called first) and the second doesn't.

What am I doing wrong?

Answer 1

Try following the demo on this page: http://flowplayer.org/tools/demos/tabs/multiple-tabs.htm