Getting nested tab based on the currently top selected tab

Question

I am having a hard time to get an id from a nested tab.

I have tabs and inside of each tab I have nested tabs. I have no problem getting the id from the top tab.

Now I would like to check wich tab is active but it must be from a group of tabs within the top selected tab.

//Top tabs
var topTabs = $('.tabs').tabs();
//Current selected top tab
var curSelected = topTabs.tabs('option', 'selected');

//Here how can I get the subtab?  NON FUNCTIONAL EXAMPLE
var secondTabSelected = $(curSelected ).children($('.subtabs').('option', 'selected'));

Any idea to archive this in a straight forward way?

Answer 1

Without seeing more of your code, I can only assume how your html is setup. But, personally, I would use tab's activate event when calling $('.subtabs').tabs() rather than binding an event listener later.

JAVASCRIPT:

$('.subtabs').tabs({
    activate: function( event, ui ) {
        //get relative li index
        var secondTabSelected = $(ui.newTab).index();
        console.log(secondTabSelected);
    }
});

DEMO: http://jsfiddle.net/dirtyd77/b8uf2/2/

Hope this helps and let me know if you need anything else!