Search code examples
jqueryeventstabsunselect

jQuery UI tabs, select/unselect (collapse) events

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?

Solution

  • 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.