How can i make jquery tabs, with exactly the same tabs on top AND bottom of the content?
So these 2 tabs combined, and MIRRORing eachother:
How can i make jquery tabs, with exactly the same tabs on top AND bottom of the content?
So these 2 tabs combined, and MIRRORing eachother:
This is a total hack of jQuery tabs, but I couldn't think of any other way to to this easily. You only have to put the style on the cloned tabs. You can check out a live example here.
The hacked
JavaScript code is as follows:
$(function() {
var myTabs = $("#tabs").tabs();
var x = $('.ui-tabs-nav').clone().addClass('mySecondTabs');
$('#tabs').append(x);
$('.mySecondTabs').tabs();
$('#tabs').tabs({
select: function(event, ui)
{
index = ui.index;
x = $('.mySecondTabs').children('li:nth-child('+(parseInt(index)+1)+')');
$('.mySecondTabs').children('li').removeClass('ui-tabs-selected').removeClass('ui-state-active');
x.addClass('ui-tabs-selected').addClass('ui-state-active');
}
});
$('.mySecondTabs').children('li').click(function ()
{
$('#tabs').tabs("select", $('.mySecondTabs').children('li').index(this));
});
});