Nesting JQuery UI tabs in custom JQuery

Question

I'm running a Wordpress theme (Slate) and it comes with shortcodes which implement tabs powered by jquery.tabs.min.js.

Using their shortcodes I tried nesting tabs, and it didn't work, most likely because of how they designed the shortcodes, so I created some simple jQuery and extra HTML to make nested tabs areas, which then contain the original theme's jquery tabs shortcodes.

Everything is working, but there is one problem which is confounding me: when sub-tabs are loaded which contain less tabs than the previous parent tabs sub-tabs, then there is a spill over of sub tabs, and jQuery gets the sub-tabs from the previous group, appending them to the current tab.

A working example is here. Notice that 'Winter Sports Activities' sub-tab from the Exercise area also loads in the Nightlife area, and Museums and Tourist Attractions from the Excursions parent tab also load in the Calendrier parent tab, which should only contain 1 sub-tab (Montreal Events).

So I've got some strange spill over going on..
My beginner jQuery code to control the parent tabs is below.

$(function(){
    var subcat = $('.sub-categories'),
        subdivfirst = $('.sub-categories div:first'),
        subdiv = $('.sub-categories div'),
        cattitlefirst = $('.categories ul li:first'),
        cattitle = $('.categories ul li');

        subcat.children('div').hide();  
        subdivfirst.show();     
        cattitlefirst.addClass('active');


        $('.categories li a').click(function(){
            var $this = $(this);

            cattitle.removeClass('active');
            subcat.children('div').hide();

            $this.parent('li').addClass('active');

            var catLink = $this.attr('id');
            var showcat = $('div #sub-' + catLink);

            showcat
                .fadeIn(600)    
                .find('.panes').show()
        });
});

And each of these ".subcategories div's" then contain the standard jQueryUI tabs.

I think there must be some sort of conflict between jQueryUI tabs and the extra home made tabs I've created, but I'm not sure how to track that down. Any help, tips or idea's to clean up my code would be greatly appreciated.

Gerry

I just checked the working example you've provided. What you've said doesn't happen for me :S ( that 'Winter Sports Activities' sub-tab from the Exercise area also loads in the Nightlife area, and Museums and Tourist Attractions from the Excursions parent tab also load in the Calendrier parent tab") – Homeostasis

I can confirm the above comment. Works fine for me in Chrome. If you solved the question yourself, you may want to post the answer below and mark it as solved. – Ectoderm

Could you please jsfiddle this so we have the markup with the js? – Durrell

It does work jsbin.com/ubaqe – Thackeray

Ditto the above comments—I have tried in Chrome. Firefox, and IE9, and I did not have the issue with sub-tabs appearing in multiple parent tabs. Which browser are you using? – Pournaras

Answer 1

Why not to use standard jquery UI tabs for both categories and subcategories? You can easily add custom class to both in css and it automatically opens firts tab on subtab, or if you use cookie then it opens last tab what was open in that maintab.

What i was thinking is something like that http://jsfiddle.net/3H33m

$(document).ready(function(){
    $('#Categories').tabs({
        show: { 
            effect: "fadeIn", duration: 600 
            } 
    });

    $('.sub-categories').tabs({
        show: { 
            effect: "fadeIn", duration: 600 
            } 
    });
});

Added only content to 1st and 2nd category, and subitems to them. 2nd maincategory subitems are basicly copy from first. I allso altered HTML structure, but only because i wanted to put elements quickly into left right. It should work with your structure too.

Sadoff