Tabs on bottom code is almost right

Thank you for https://jqueryui.com/tabs/#bottom - It was useful. But the example fails if you have more than one set of tabs on a page.

Here is code that does better:

$(function() {

$( '.tabs-bottom' ).tabs();

$( '.tabs-bottom.ui-tabs-nav, .ssWorkbook .ui-tabs-nav *' )

.removeClass( "ui-corner-all ui-corner-top" )

.addClass( "ui-corner-bottom" );

$(".tabs-bottom").each( function () {

$(this).find( ".ui-tabs-nav" ).appendTo( this );

return true;} );

});

Note that no IDs are required; this small script works for any number of tabbed areas on a page. (Of course, the tab panes and links still need DIVs, but that's usually on the server side.)

You'll also note that I changed the direct child selector to a descendent selector where the border classes are changed. This is necessary to ensure that the links get the necessary attributes for the CSS.

Enjoy.

P.S. I hope this is the right place - if not, feel free to move. (I jut followed the 'report a bug' link on the referenced page, so if I'm wrong, please make it point where you want reports.)