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

Heidt

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

Boeotian

I wouldn't recommend using .ui-tabs .ui-state-disabled { display: none; } since if you have any disabled JQueryUI elements (such as a temporarily disabled button) on a non-disabled tab, they will be hidden as well. I would change it to .ui-tabs>.ui-tabs-nav>.ui-state-disabled so only the tabs get hidden. Note: This is against JQueryUI 1.9.2 – Neolatin

I've previously used methods based on hiding the li element, but that interacts badly with keyboard navigation between tabs: click on one of the visible tabs and press right-arrow repeatedly will eventually display the content from a hidden tab. This answer makes the navigation work properly. – Buerger

Answer 2

$(".selector ul li:eq("+index+")").hide();

Thoroughbred

Answer 3

I just tested this for two tabs, you can add the needed logic to make it available for N tabs.

For this you open a first tab by default, then you open a second tab then:

$("#yourTabHref").parent().children(":first").children(":first").next().hide();

Explanation: The parent is used to go to the div of your tabs, then children(":first") moves you tho the ul, then again children(":first") moves you to the first li, but we are going to hide the second tab, that means the second li that's why whe use the next(), now we are at the second tab, then just hide it.

By last, just hide the tab content:

$("#yourTabHref").hide();

To show everything again just:

$("#yourTabHref").parent().children(":first").children(":first").next().show();
$("#yourTabHref").hide();

Damp

Answer 4

Well it may not be too late to answer this query. What I did is to give an id to html li

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">New Item</a></li>
    <li><a href="#tabs-2">Product</a></li>
    <li><a href="#tabs-3">Purchase Order</a></li>
    <li><a href="#tabs-4">Administration</a></li>
    <li><a href="#tabs-5">License</a></li>
    <li **id="tab-6"**><a href="#tabs-6">Test</a></li>
    <li><a href="#tabs-7">Specific Product</a></li>
    <li><a href="#tabs-8">Support</a></li>
  </ul>

then I used JQuery code $('#tab-6').hide(); to hide and $('#tab-6').show(); to Show the tab.

Hope this helps Cheers

Frier

Answer 5

This bugged me for a while too and I ended up writing a small plugin to make it easy. You can check it out here: KylesTechnobabble (with a JSFiddle example).

Note: This is for jQuery UI 1.9.2. I haven't tested with anything else.

Mandler

Answer 6

Not 100% sure on the specific code, but try something like this to hide-and-not-delete the tab:

$( ".selector" ).tabs({
    remove: function(event, ui) { $(this).hide(); return false; }
});

Snavely

Hi MDCore, Many thanks for your reply. I tried out this code but doesn't worked. First i am calling $( ".selector" ).tabs('remove', index); After this the tab is removed. Again if i call your function then the element itself is not present. – Heidt

Answer 7

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); 

Bibliophage