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

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 );