jQuery UI Tabs is a great facility, but I found something that was missing. I spent a while trying to figure out how to get the content of a current tab being shown. The reason I needed the current tab content was because I wanted to run another javascript function when the tab became visible.

The reason I needed it to be visible is because DOM elements need to be visible before jQuery can get DIV dimensions. Below you can see I cache the div selector #tabs using jQuery, then I run the tabs UI function on the object. (All normal to initialize jQuery UI tabs)

Then on the show property which jQuery UI tabs has provided you can pass a function through. This executes when the tab is being shown. I then get the current shown tab’s index using the selector ui-tabs-panel which is the default class name of each tab. Now I have the index of the DOM element I can then use a wonderful jQuery function called eq which you guessed it, can select a given element specifying an index.
[crayon lang=”js”]
$tabs = tabs.tabs({
show: function(event, ui) {
var selected = $(this).tabs( “option”, “selected” );
var $current_tab = $tabs.find(‘.ui-tabs-panel’).eq(selected);
$current_tab.myfunction ({
‘maxHeight’ : 218
});
};
}); [/crayon]