jqueryui showing hidden tab content on this tab

Question

I have an iframe in a tab with a hidden element, and I want to show the element when the tab is opened.

This element (same class) is also under all the tabs, but I only want the element under the current tab to be shown.

Here's my non working attempt at it:

$("#tabs").tabs({
 collapsible: true,
 show: function(event, ui) { 
  ui.find("iframe").contents().find("#hidden").show();
 }
});

Corrections would be appreciated, thanks.

Answer 1

I think you want to use ui.panel instead of ui. The panel attribute on the ui parameter will be the current panel (tab) being shown.

$("#tabs").tabs({
        collapsible: true,
        show: function(event, ui) { 
                ui.panel.find("iframe").contents().find("#hidden").show();
        }
});