Question

Problem:

I have jQuery code that switch perfectly between tabs. However, I am wondering how it can be extended so that it also activates the first sub element of each id.

Code for HTML tab navigation:

<div id="navtabs">
    <div>
        <a href="#tab1" class="active btn btn-info" data-toggle="tab"><i class="icon-home"></i>Start</a>
        <a href="#tab2" class="btn btn-info" data-toggle="tab"><i class="icon-book"></i>Essay</a>
        <a href="#tab3" class="btn btn-info" data-toggle="tab"><i class="icon-ok-sign"></i>Criteria</a>
        <a href="#tab4" class="btn btn-info" data-toggle="tab"><i class="icon-time"></i>Time</a>
    </div>
</div>

Code for example tab:

<div class="tab-pane" id="tab2">

    <ul id="myTab" class="nav nav-tabs">
        <li class="active"><a href="#participants" data-toggle="tab">Participants</a></li>
        <li><a href="#gradevalues" data-toggle="tab">Criteria</a></li>
    </ul>

    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="participants">Text</div>
        <div class="tab-pane fade" id="gradevalues">Text</div>
    </div>

</div>

jQuery code:

$('#navtabs a[data-toggle="tab"]').on('shown', function () {
    $('#navtabs a[data-toggle="tab"]').attr('class','btn btn-info');
    $(this).attr('class','active btn btn-info');
})

Scenario:

When I click on the second tab (#tab2), I would like in addition to what the jQuery does now also:
(1) activate the first li element in #myTab
(2) activate the first div element in #myTabContent.

That is to say, always make sure that there is a "class=active" for the first li element and "class=tab-pane fade in active" for the first div.

Answer 1

Try this:

$('#navtabs a[data-toggle="tab"]').on('shown', function () {
    $('#navtabs a[data-toggle="tab"]').attr('class','btn btn-info');
    $(this).attr('class','active btn btn-info');

    var tabID = $(this).attr('href');
    var lis = $(tabID).find('#myTab li');//Get collection of li's
    $.each(lis, function(){
        $(this).removeClass('active'); //Remove the active class from each li
    });   
    $(tabID).find('#myTab li:eq(0)').addClass('active');//Add active class 

    //Same process for divs
    var divs = $(tabID).find('#myTabContent div');
    $.each(divs, function(){
        $(this).removeClass('in active');
    });
    $(tabID).find('#myTabContent div:eq(0)').addClass('in active');

});