Question

Made a fiddle: http://jsfiddle.net/n6ub3/

I’m aware that the code has a LOT of repeating in it, its on the list to refactor once functionality is correct.

The behaviour i’m trying to achieve is if there is no selectedTab on page load, set the first tab in each group to selectedTab. If there is a selectedTab present, then use this as the default shown div.

However, as you can see from the fiddle its not working as planned!

If anyone has any ideas how to refactor this code down that’d be great also!

Answer 1

WORKING DEMO with simplified code

$('.tabContent').hide();

$('.tabs').each(function(){
    var search = $(this).find('div.selectedTab').length;
    if( search === 0){
        $(this).find('.tabTrigger').eq(0).addClass('selectedTab')
    }

    var selectedIndex = $(this).find('.selectedTab').index();
    $(this).find('.tabContent').eq(selectedIndex).show();
});

$('.tabTrigger').click(function(){
   var ind = $(this).index();
    $(this).addClass('selectedTab').siblings().removeClass('selectedTab');
   $(this).parent().find('.tabContent').eq(ind).fadeIn(700).siblings('.tabContent').hide();   
});

That’s all! You don’t need all that ID’s all around. Look at the demo!