Question

I am trying to open the last tab in a jQuery Tabs on DOM ready but the solutions I have found online do not seem to be working. I am using vertical tabs as per the example in the jQuery UI Demo site.

JS –

$( "#personnelStats_tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#personnelStats_tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );

CSS –

.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em; }

Answer 1

Thanks for the help, everyone. Unfortunately, I was not specific enough in my question (wrote it in too much of a hurry) and the solution was not given here. However, a link to a similar post from 2009 that I somehow missed and the use of .last() helped me find a solution:

$(document).ready(function() {
    //Initiate jQuery Tabs
    var $tabs = $( "#personnelStats_tabs" ).tabs();
    //Get the index of the last tab
    var last = $(".ui-tabs-nav li").last().index();
    //Add hack for vertical tabs
    $tabs.addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#personnelStats_tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
    //Select the last tab
    $tabs.tabs("select", last);
});

Thanks folks! +1 to all of you