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

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.