1

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?

dan1st
  • 12,568
  • 8
  • 34
  • 67
James Lin
  • 25,028
  • 36
  • 133
  • 233

2 Answers2

1

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
         }
    }
});
James Khoury
  • 21,330
  • 4
  • 34
  • 65
jcolebrand
  • 15,889
  • 12
  • 75
  • 121
  • 1
    I came across this issue and used your answer. I Added a code snippet to show how I used it for future reference. – James Khoury Aug 03 '12 at 02:22
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.

Stephen
  • 18,827
  • 9
  • 60
  • 98
  • @Stephen ... reckon he might show us what he's tried or something? `;)` ... sure would be nice to know what he's fighting huh? – jcolebrand Nov 01 '10 at 20:31
  • 1
    @drachenstern: Agreed. If what we've described doesn't work, we'll need to see some examples of what has been tried, along with some markup. – Stephen Nov 01 '10 at 20:33
  • 1
    Nice answer (+1 if I had any votes left!). Just to note that within the `select` event, `this` is outer div element, so your code could be reduced to `$(this).children('ul.ui-tabs-nav > li.ui-tabs-selected').length`. Slightly quicker & more flexible. – lonesomeday Nov 01 '10 at 20:38
  • This works, I have seen another question for this and the answer was similar, this solution seems like a work around instead of a solid event triggering eg. 'collapsed'. Anyway thanks guys! – James Lin Nov 01 '10 at 20:42
  • actually, this almost worked, but problem is, you cannot really depends on the class since it applies "ui-tabs-selected" AFTER the select event – James Lin Nov 01 '10 at 21:05
  • @James Lin: You can use `if (1 === $(this).find('ul.ui-tabs-nav > li.ui-tabs-selected').length)` This will pass if you're collapsing the tabs and fail if you're expanding them. That should be sufficient for you, I think? – lonesomeday Nov 01 '10 at 21:13
  • lol @ yoda condition : http://stackoverflow.com/questions/2349378/new-programming-jargon-you-coined/2430307#2430307 – Stephen Nov 01 '10 at 21:30
  • I have a work around for this class work around, hence marking it answered. – James Lin Nov 01 '10 at 21:30
  • Remember I said you cannot check the class because select event fires before applying the class? In my scenario, I have a mouseout event, which I can use to check the class exists or not. – James Lin Nov 01 '10 at 22:09