I've a problem in differentiating the handling of events for two nested tabs, using  jquery 1.4.2 and UI 1.8.4.

If I use a "#div > ul" selector my tabs are not built, but if I use a normal "#div" selector I always get events from both tabs even if operating on the nested one.

I have some tabs instanciated with this syntax (>ul) with older versions of jquery.ui, shouldn't this work also with 1.8.4?

My code:

I could build my nested tabs, also using two different css classes (declaring scope in theme builder), for example:

jQuery('#tabs1').tabs();

jQuery('#tabs2').tabs();

This way I get my nested tabs initiated, with a different style for each.

I also have two function to bind tabsselect event:

jQuery('#tabs1').bind('tabsselect', function(event, ui) { [... CUT...]

jQuery('#tabs2').bind('tabsselect', function(event, ui) { [... CUT...]

This way the problem is that any tabsselect event for tabs2 (the nested tabs) always generates an event for a tabsselect on tabs1.

So I tried to build by tabs with a different selector:

and also adapting the tabsselect binding functions; but this way my tabs are not initiated at all, as if html does not mach css.

BTW, the two scoped css, generated with themebuilder, are like:

.nested .ui-tabs [....]

.main .ui-tabs [....]

Where's my error?

Thanks for any help,

al.