Question

I have a nested jQuery-UI Tab.
for example

Tab-Day1
— Tab-Lunch
— Tab-Dinner
Tab-Day2
— Tab-Lunch
— Tab-Dinner
Tab-Day3
…

Is there a way to synchronize the sub-tab when I change the upper tab?

Say the default tab is “Day1”-“Lunch”,
Step 1) click on “Dinner” on “Day1” -> “Day1”-“Dinner” will be in focus
Step 2) click on “Day2” -> “Day2”-“Dinner” will be in focus instead of the default “Day2”-“Lunch”?
Such that when change the upper tab, the same related sub tab will always be in focus?

Thanks a lot.

Answer 1

You could do something like this:

1. Use data-* attributes to associate tabs with the same “category.”

2. Tap into the select event on the tabs widget:

   var selectingSiblings = false;
   
   $(".tabs").tabs({
       select: function(event, ui) {
           if (!selectingSiblings) {
               var category = $(ui.tab).data("category"),
                   hash;
   
               selectingSiblings = true;            
   
               if (category) {
                   $("a[data-category='" + category + "']").each(function() {
                       var $tabs = $(this).closest(".tabs");
   
                       $tabs.tabs("select", $(this).attr("href"));
                   });
               }
               selectingSiblings = false;
           }
       }
   });
   

   The purpose of the boolean selectingSiblings is that when you call select manually on tabs, it still fires the event handler. To prevent infinite recursion we need to designate a call to select that we make vs. one that the user made.

Best seen with a working example: http://jsfiddle.net/andrewwhitaker/q8fh7/4/