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

Answer 1

Here is another and I believe, more simple solution - simply hide li tags. In my case the tabs have 'data-carrier-id' class:

var tabs = $("li[data-carrier-id]");
tabs.hide();

Then you can show a particular tab:

$("li[data-carrier-id=" + carrierId + "]").show();

Hiding and showing the tabs hides and shows corresponding divs.

Here is one wrinkle. After changing the tab visibility, the selected tab has to be changed. This is by design. Even with "option" "disable" the selected tab cannot be disabled. This is relatively easy to fix, just loop through the visible tabs and find the first visible index:

var firstVisibleTabIndex;
tabs.each(function (index) {
  if ($(this).is(":visible")) {
     firstVisibleTabIndex = index;
     return false;
   }
 });
 var jqTabs = $("#tabs").tabs();
 jqTabs.tabs("option", "active", firstVisibleTabIndex);