Eduardo Eduardo - 5 months ago 15
jQuery Question

Jquery tab. Check if any of them is open

I have some tabs. All are collapsed by default. If the user click on a button first tab opens. I figured out that part:

jQuery(document).ready(function() {
jQuery('#showFirstTab').on('click', function() {
var tabObj = jQuery('#podcast-tabs li:first a');
tabObj.tab('show');
var programId = tabObj.data('programid');

jQuery('#calendar-' + programId).fullCalendar('render');
});
});


Now I need to check if any tab is open, and click again on the same button, all tabs should collapse. I was thinking in use a variable to save the state, but not sure if library provides already a solution for this.

Answer

You can first check if any tab is open, by using the tabsactivate event:

var isActive = false;
$(".podcast-tabs").on("tabsactivate", function( event, ui ) {
    isActive = true;
});

Now, inside your click code check for that variable and if true close all tabs using option like:

if (isActive)
    $("#podcast-tabs").tabs("option", "active", false);