How do I switch to a new jQuery UI tab programmatically?

Question

I am building a \"check-out\" like interaction with jQuery UI tabs. This means that the click of a button on the first tab will deactivate the first tab and move to the next

Answer 1

$(function() {
    $( "#tabs" ).tabs({ activate: function(event ,ui){
        //console.log(event);
        //alert(  ui.newTab.index());
        //alert( ui.newTab.attr('li',"innerHTML")[0].getElementsByTagName("a")[0].innerHTML);

        alert( ui.newTab[0].getElementsByTagName("a")[0].innerHTML);
        //alert( this.text);
    } });
});

Answer 2

@Aaron Sherman already answered your question. Here is the detailed step.

Here is JS part of the code:

$(document) .ready(function() {
    $("#tabs").tabs(); 
    $(".btnNext").click(function () {
            $( "#tabs" ).tabs( "option", "active", $("#tabs").tabs('option', 'active')+1 );
        });
        $(".btnPrev").click(function () {
            $( "#tabs" ).tabs( "option", "active", $("#tabs").tabs('option', 'active')-1 );
        });
});

Here are the "a href" tags to be added in your tabs div

Example:

<div id="tabs-1">
<a class="myButton btnNext" style="color:white;">Next Tab</a>
</div>
<div id="tabs-2">
<a class="myButton btnPrev" style="color:white;">Previous Tab</a>
<a class="myButton btnNext" style="color:white;">Next Tab</a>
</div>
<div id="tabs-3">
<a class="myButton btnPrev" style="color:white;">Previous Tab</a>
</div>

Answer 3

Try changing your code to this:

var $tabs = $('#tabs').tabs({ selected: 0, disabled: [1,2] }); 
$("#addstudent").click(function(){
   $tabs.tabs('enable', 1).tabs('select', 1).tabs('disable', 0);        
}); 
$("#confirm").click(function(){
    $tabs.tabs('enable', 2).tabs('select', 2).tabs('disable', 1);    
}); 

JSBin Example

Answer 4

For jQuery UI 1.9+, the select method has been deprecated in the API. In 1.9+, you need to use option and active, instead.

From the documentation:

Old API:

// Activate the third tab (in a zero-based index)
$( "#tabs" ).tabs( "select", 2 );

New API:

// Activate the third tab (in a zero-based index)
$( "#tabs" ).tabs( "option", "active", 2 );

Answer 5

I modified solution of @Mahesh Vemuri adding possibility to disable steps following the first and then enable them after clicking "NEXT" button:

JScode:

$(document) .ready(function() {
    $("#tabs").tabs(); 

    $("#tabs").tabs( "option", "disabled", [ 1, 2 ] );

    $(".btnNext").click(function () {
        $("#tabs").tabs( "enable", $("#tabs").tabs('option', 'active')+1 );
        $("#tabs").tabs( "option", "active", $("#tabs").tabs('option', 'active')+1 );
    });

    $(".btnPrev").click(function () {
        $("#tabs").tabs( "option", "active", $("#tabs").tabs('option', 'active')-1 );
    });
});

The HTML is the same.

P.S.: Note that with this code, clicking NEXT button will enable next tab (previously disabled) but clicking PREV button will not disable current tab, in order to allow user to go backward and forward into a sequential flow until next disabled tab.

Hopefully, if Tabs contain 3 steps of a form, action of NEXT button could be fired only if a JS Form Validation will have success.