Jquery UI Tabs: How do i hide a tab and its corresponding div when i close it

Question

I have used Jquery UI Tabs, and given close option to the tabs. By default i am creating three tabs and its corresponding three divs. Now when i close a tab then the tab and its div are removed. I need to just hide the tab and div and when i click Add Tab i should just show the hidden tab and div. I am not sure how to show/hide the tab and div property.

Thanks in advance.

Jeevi

Answer 1

Based on the discussion at http://old.nabble.com/UI-Tabs:-How-to-hide-show-a-Tab-td19569388s27240.html the following has worked for me -

Adding the following CSS

.ui-tabs .ui-state-disabled { 
    display: none; /* disabled tabs don't show up */ 
} 

and then using the tabs disabled options in either of the following forms -

$( ".selector" ).tabs({ disabled: [1, 2] }); //when initializing the tabs
$( ".selector" ).tabs( "option", "disabled", [1, 2] ); // or setting after init

see http://jqueryui.com/demos/tabs/#option-disabled for the detailed jQuery docs