how to hide empty tabs

Question

I am using jquery_ui tabs, and my tabs look something like this:

<div id="mytabs">
  <ul>
    <li class="tab-one"><a href="#onepane">apples</a></li>
    <li class="tab-two"><a href="#twopane">berries</a></li>
    <li class="tab-three"><a href="#threepane">citrus</a></li>
  </ul>
  <div id="onepane">green apples, red apples</div>
  <div id="twopane">blueberries, raspberries </div>
  <div id="threepane"></div>
</div>

My question:

As the tab content changes, I would like to dynamically hide any empty tabs. In the example above, I would like to hide the third tab, "citrus", because its corresponding tab-pane contains no content. Does anyone know how to do this?

I looked at the jquery_ui tabs documentation (http://jqueryui.com/demos/tabs/), and searched through stackoverflow and google, but did not find anything that addressed my issue. — moondog, Sep 03 '12 at 00:27
http://stackoverflow.com/questions/5383755/jquery-ui-tabs-how-can-i-remove-tab-list-item-if-corresponding-content-panel-i — Nate-Wilkins, Sep 03 '12 at 00:28

score 1 · Answer 1 · edited May 23 '17 at 12:26

1

You must first select the Tabs that belong to mytabs Then go through all the panels, selecting the ones that are empty and disable them.

Duplicate - jQuery UI Tabs - How can I remove tab list item if corresponding content panel is empty?

edited May 23 '17 at 12:26

Community

1
1

answered Sep 03 '12 at 00:33

Nate-Wilkins

5,364
4
46
61

I looked at this more carefully, and I now see it is not quite what I was looking for. I would like to hide (rather than delete) the unwanted tabs, and I would like to do this dynamically as the tab content changes. I ended up implementing the solution below. – moondog Sep 03 '12 at 20:15

score 1 · Accepted Answer · edited May 23 '17 at 10:34

This approach, suggested by Nate, did not quite meet my needs, and I ended up implementing the following solution. The code below gets triggered when the user takes an action that changes the content of some tab. The code checks whether any of the tabs are now empty, and if so hides the empty tabs. In addition, it checks whether the selected tab is now hidden, and if so changes the selected tab to the first visible tab.

var mytabs = $('div#mytabs');
var selected = mytabs.tabs('option', 'selected'); // index of selected tab
mytabs.children('ul').children('li').children('a').each(function(index, elem) {
    if (mytabs.children($(elem).attr('href')).html().trim() === ''){
        $(elem).parent().hide(); // hide the 'li' tab-element
    } else {
        $(elem).parent().show(); // show the 'li' tab-element
    }
}); 
// if selected tab is now hidden, select the first visible tab
if (mytabs.children('ul').children('li').eq(selected).is(':hidden')){
    mytabs.children('ul').children('li').each(function(index, elem) {
        if ($(elem).is(':visible')){
            mytabs.tabs('select', index); // select this tab
            return false; // break
        }
    }); 
}

how to hide empty tabs

2 Answers2