jQuery UI tabs, select/unselect (collapse) events

Question

I am using jQuery UI 1.8.5 tabs plugin, with collapsible : true configuration. I need to call a function after a tab is collapsed to add a css class. Does anyone know how?

Answer 1

You could check if the ui-tabs-selected class exists on click. Assuming you're using standard markup:

// in your click event
var selected_exists = $('#yourTabBox')
    .children('ul.ui-tabs-nav')
    .children('li.ui-tabs-selected')
    .length;

if (selected_exists) {
    // Nothing is collapsed
} else {
    // collapsed
}

This is perfect for the select event.

Answer 2

What about the show event won't work for this? Because you don't know which one was hidden?

Maybe even the select event might be what you want.

using the 'tabsselect' event:

$(".selector").tabs({
    collapsible: true,
    select: function(event, ui)
    {
         var prevSelectedIndex = $(".selector").tabs('option', 'selected');
         var nextSelectedIndex = ui.index;

         if(prevSelectedIndex === -1)
         {
             // It was previously collapsed and the user is now opening
             // tab at index: nextSelectedIndex 
         }
         else if(prevSelectedIndex === nextSelectedIndex )
         {
              // The user has clicked on the currently opened
              // tab and it is collapsing
         }
    }
});