Jquery UI tabs, switching to a new tab programmatically

Spread the love

Question Description

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:

  

tab 3, index 2

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.

Practice As Follows

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

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.