jQuery, multiple tab groups on one page

Question

I am using a nice simple tab example from Soh Tanaka.http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery

I am trying to put multiple tab groups on the same page yet use the same classes for each tab group. I am making the content for the tabs dynamically, so making new classes for each tab group is out of the question.

How do I use the same classes, same jQuery for the different tab groups? I know there is the .each() method available in jQuery, but I am having trouble trying to figure out the correct places to put it in the jQuery. Any help is greatly appreciated.

Thanks in advance.

Answer 1

In the comments on the blog entry you linked, there is a discussion about that. He links to a demo here: http://www.sohtanaka.com/web-design/examples/tabs/index3.htm

In that demo, there is a change in the way tabs are accessed.

$("div[class^='simpleTabs']").simpleTabs(); //Run function on any div with class name of "Simple Tabs"

This is done by wrapping your tabbed sections in a div with a class of simpleTabs

Answer 2

Pinching the code from the example page by Soh Tanaka that you refer to in your article:

$(document).ready(function() {

 //When page loads...
 $(".tab_content").hide(); //Hide all content
 $("ul.tabs li:first").addClass("active").show(); //Activate first tab
 $(".tab_content:first").show(); //Show first tab content

 //On Click Event
 $("ul.tabs li").click(function() {

  $("ul.tabs li").removeClass("active"); //Remove any "active" class
  $(this).addClass("active"); //Add "active" class to selected tab
  $(".tab_content").hide(); //Hide all tab content

  var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
  $(activeTab).fadeIn(); //Fade in the active ID content
  return false;
 });

});

The critical bit is to fix the code to only refer to the current tab group for the purposes of switching between tabs. This is achieved by making sure that where the global context is not desired, only the local group, we change the selector. When referring from a set of tabs to their content, the problem is how to match one with the other, this can either be done with some common ID system, or if tabs are assumed to precede their content, with no overlapping, then we can simply find the next tab_container along from a tab set.

First, initialisation:

$(".tab_content").hide();

Fine, we want to hide all of them.

$("ul.tabs li:first").addClass("active");
$(".tab_content:first").show();

Not good, this would refer to all tab groups on the page, needs to be specific.

$("ul.tabs").each(function() {
    $(this).find('li:first').addClass("active");
    $(this).nextAll('.tab_container:first').find('.tab_content:first').show();
});

The .click() event starts off alright, binding all ul.tabs li is fine. Inside it needs the selectors changed.

$("ul.tabs li").click(function() {
    var cTab = $(this).closest('li');
    cTab.siblings('li').removeClass("active");
    cTab.addClass("active");
    cTab.closest('ul.tabs').nextAll('.tab_container:first').find('.tab_content').hide();

    var activeTab = $(this).attr("href"); //Find the href attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active ID content

    return false;
});

The last section with the activeTab is already fine, just be careful not to reuse IDs.

See demo: http://jsfiddle.net/uyvUZ/1/

Visually easier, but different demo: http://jsfiddle.net/uyvUZ/2/