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. I have been combing through the posts on Stack Overflow but nothing I try seems to work. I am using jQuery UI 1.8, here is the code:

When I click the buttons, the next tab becomes unlocked (in that it is selectable) but it does not disable the tab at index 0 and switch to the tab at index 1. Also, the corresponding panel does not show.

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