Multiple tabs and accordion instances

Since jQuery Tools 1.1.0 it is possible to instantiate multiple accordion (or tabs) instances with a single call. Here you can see five different Tabs where the last three of them have been nested under the second Tabs instance. This whole thing has been setup with a single call as follows:

    $("ul.tabs").tabs("> .pane");

JavaScript

First tab content.

Second tab content

Third tab content

First tab content.

Second tab content

Third tab content

First tab content.

Second tab content

Third tab content

First tab content.

Second tab content

Third tab content

standalone demo

HTML coding

Now how do we know which panes belong to which tabs? The solution is to enclose each tab/pane combination inside the same parent (or wrapper) element. Here is our setup:

<!-- wrapper element for the first Tabs/panes combination -->
<div class="wrap">
 
  <!-- the tabs -->
  <ul class="tabs">
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
  </ul>
 
  <!-- tab "panes" -->
  <div class="pane">First tab content.</div>
  <div class="pane">Second tab content</div>
  <div class="pane">Third tab content</div>
 
</div>
 
<!-- wrapper element for second set of Tabs  -->
<div class="wrap">
 
  <!-- the tabs -->
  <ul class="tabs">
    ...
  </ul>
 
  <!-- tab "panes" (containing the nested Tabs) -->
  <div class="pane">
    [ nested tabs/panes #1 ]
  </div>
  <div class="pane">
    [ nested tabs/panes #2 ]
  </div>
  <div class="pane">
    [ nested tabs/panes #3 ]
  </div>
 
</div>

HTML

Each nested Tabs are contained within a separate div.pane which work as their wrapping element and they do not need any extra wrapper.

Our jQuery selector: > .pane searches for panes under the wrapper element. If we had used a simple selector such as .pane the second Tabs would have selected all the panes that are under the parent div.wrap. This would have contained 12 different panes altogether because those nested tabs are also contained by the DIV with the wrap class. This is why we need to select only the direct children under the wrapper with the > .pane selector.

If you don't use nested tabs or your instantiate your nested tabs with a different pane selector then you don't need to be as careful with these selectors as in the above setup. You can read more about multiple tab instances in the Tabs documentation.

Multiple accordions

Here are two separate accordion instances that are instantiated with a single call as follows:

  $(".accordion").tabs(".pane", {tabs: 'h2', effect: 'slide'});

JavaScript

First pane

Lorem ipsum dolor

Fusce semper, nisi nec pellentesque sollicitudin.

Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra ornare. Nulla id massa nec erat laoreet elementum. Vivamus tristique auctor odio. Integer mi neque.

Second pane

Vestibulum ante ipsum

Cras diam. Donec dolor lacus, vestibulum at, varius in, mollis id, dolor. Aliquam erat volutpat. Praesent pretium tristique est. Maecenas nunc lorem, blandit nec, accumsan nec, facilisis quis, pede. Aliquam erat volutpat. Donec sit amet urna quis nisi elementum fermentum.

Third pane

Curabitur vel dolor

Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna, non vulputate libero justo nec sem. Nullam arcu. Donec pellentesque vestibulum urna. In mauris odio, fringilla commodo, commodo ac, dignissim ac, augue.

First pane

Lorem ipsum dolor

Fusce semper, nisi nec pellentesque sollicitudin.

Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra ornare. Nulla id massa nec erat laoreet elementum. Vivamus tristique auctor odio. Integer mi neque.

Second pane

Vestibulum ante ipsum

Third pane

Curabitur vel dolor

standalone demo

HTML coding

This time you don't have to worry about additional parent elements since in accordion setup the Tabs and panes are already inside the same parent element. Our HTML setup is identical to the previous accordion setup but here we use CSS class names instead of IDs so that we can deal with multiple elements. Here is the structure for the above accordions:

<div class="accordion">
  <h2>First pane</h2>
  <div class="pane"> ... </div>
 
  <h2>Second pane</h2>
  <div class="pane"> ... </div>
 
  <h2>Third pane</h2>
  <div class="pane"> ... </div>
 
</div>

HTML

CSS coding

Here we style elements with the .accordion class instead of a single #accordion element. Look at the standalone page for the full CSS declarations.

  .accordion {
 
    /* some decorations for the accordion root element */
    background:#333 url(/media/img/gradient/h300.png) 0 0;
    width: 300px;
    border:1px solid #333;
 
    /* IE6 cannot handle PNG24 backgrounds. use a solid color instead */
    -background:#666;
 

    /* put them side by side */
    float:left;
    margin:20px 0 20px 30px;
  }

CSS