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?

Answer 1

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