jQuery tabs: how to hide single tab?

Question

How do I hide the tab2? I can add ID to the second li and than hide it with jQuery, but isn't there some way to do it through .tabs directly?

<div id="tabs" style="width:100%">
<ul>
    <li>
        <a href="#tab1">
            Tab 1 Title
        </a>
    </li>
    <li>
        <a href="#tab2">
            Tab 2 Title
        </a>
    </li>
</ul>
<div id="tab1" style="width:100%;">
    content tab1
 ....

Solution 1

Try this :

$('[href="#tab2"]').closest('li').hide();

Solution 2

Try this:

  $($("#tabs").find("li")[1]).hide()

Solution 3

Demo

HTML:

<div id='MyTabSelector'>
  <ul>
    <li><a href="#tabs-1">Tab 0</a></li>
    <li><a href="#tabs-2">Tab 1</a></li>
    <li><a href="#tabs-3">Tab 2</a></li>
  </ul>
  <div id="tabs-1">
      <a href="#" onclick="$('#MyTabSelector').disableTab(1);">Disable Tab 1</a><br />

JS:

(function ($) {
    $.fn.disableTab = function (tabIndex, hide) {
    // Get the array of disabled tabs, if any
    var disabledTabs = this.tabs("option", "disabled");

    if ($.isArray(disabledTabs)) {
        var pos = $.inArray(tabIndex, disabledTabs);

        if (pos < 0) {
            disabledTabs.push(tabIndex);
        }
    }
    else {
        disabledTabs = [tabIndex];
    }

    this.tabs("option", "disabled", disabledTabs);

    if (hide === true) {
        $(this).find('li:eq(' + tabIndex + ')').addClass('ui-state-hidden');
    }

    // Enable chaining
    return this;
};

$.fn.enableTab = function (tabIndex) {
            $(this).find('li:eq(' + tabIndex + ')').removeClass('ui-state-hidden');
    this.tabs("enable", tabIndex);
    return this;

};


})(jQuery);
$('#MyTabSelector').tabs();

Solution 4

You could try this:

//when you click a tab
$('#tabs a').click(function(){
    //show hidden tabs again
    $('#tabs li:hidden').show();
    //hide the clicked tab
    $(this).parent().hide();
});

Solution 5

you need to hide both li as well as div to hide tab so your jquery would be

$($("#tabs").find("li")[1]).hide();
$($("#tabs").find('#tab2')).hide();

View more solutions