Problems displaying all jquery tabs

Question

I set some jQuery tabs to start with no tab selected as follows:

$('#tabs').tabs( { selected: -1 } ); 

Then I also have a separate link, which when clicked should deselect all the tabs.

 $("#deselectButton").click(function(){ $('#tabs').tabs( 'select' , -1 ) }); 

or

 $("#deselectButton").click(function(){ $('#tabs').tabs( 'selected' , -1 ) }); 

Clicking deselectButton deselects the contents of the tabs, however the tab header remains active with the class "ui-tabs-selected ui-state-active".

What is the right way to deselect all tabs?

Answer 1

Try this code:

 $("#deselectButton").click(function(){ $('#tabs').tabs( 'selected' , -1 ) $(".ui-tabs-selected").removeClass("ui-state-active").removeClass("ui-tabs-selected"); }); 

Answer 2

If you are using jQuery version 1.9+ user interface then CSS code has changed to:

 $('#tabs').tabs('option', 'active', false); 

or

 $('.ui-tabs-active').removeClass('ui-tabs-active ui-state-active'); 

according to the comments below. Thanks

Answer 3

jQuery 1.10 requires that the reset option be set to true.

 $('#tabs').tabs('option', 'collapsible', true); $('#tabs').tabs( 'option', 'active', false );