Howto clone/copy/mirror a jquery tab

Question

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:

http://jqueryui.com/demos/tabs/default.html

http://jqueryui.com/demos/tabs/bottom.html

Answer 1

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));
        });


    });