Having trouble deselecting all jquery tabs
-
10-07-2019 - |
Question
I set up some jQuery tabs to start off with no tabs selected like this:
$('#tabs').tabs( { selected: -1 } );
Then I also have a separate link that when pressed needs to deselect all the tabs.
$("#deselectButton").click(function(){
$('#tabs').tabs( 'select' , -1 )
});
or
$("#deselectButton").click(function(){
$('#tabs').tabs( 'selected' , -1 )
});
The deselectButton click does deselect the tabs content, however the tabs title remains active with the class 'ui-tabs-selected ui-state-active'.
What is the correct way to deselect all the tabs?
Solution
Try this code:
$("#deselectButton").click(function(){
$('#tabs').tabs( 'selected' , -1 )
$(".ui-tabs-selected").removeClass("ui-state-active").removeClass("ui-tabs-selected");
});
OTHER TIPS
jQuery 1.10 requires the collapsible option to be set to true.
$('#tabs').tabs('option', 'collapsible', true);
$('#tabs').tabs( 'option', 'active', false );
If you are using the jQuery UI version 1.9+ then the CSS code has changed to:
$('#tabs').tabs('option', 'active', false);
or:
$('.ui-tabs-active').removeClass('ui-tabs-active ui-state-active');
as per comments below. Thanks
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow