Hi, I have created a tabs plugin that I'd like to have mutiple
instances of on the same page;

$('#tabs1').detatabs();
$('#tabs2').detatabs();

Unfortunately all seems to work well, except when I change tabs only
the content area of the first instance changes. Below is my code; here
is an example http://phatpad.com.au/tabs/tabsplugin.html

<code>
(function($) {

        $.fn.detatabs = function(options) {
                // any settings
                var defaultTab = 0;
                var currentTabName;
                var currentTab;
                var openTab;
                var openTabName;

                if (options) $.extend(defaults, options);

                return $(this).each(function() {

                        // set intitial values
                        $(this).addClass('detatabs');
                        var tabHeader = $(this).find('ul');
                        var tabItems = $(tabHeader).find('li');
                        var tabContent = $(this).find('> div');

                        // setup the tabs
                        $(tabHeader).addClass('deta_tabs');
                        $(tabItems).each(function(num) {
                                if (num == defaultTab) {
                                        $(this).addClass('current');
                                        currentTab = $(this);
                                        currentTabName = 
$(this).find('a').attr('href');
                                }
                        });

                        // setup the content area
                        $(tabContent).addClass('deta_tabs_content');
                        $(tabContent).each(function(num) {
                                if (num != defaultTab) {
                                        $(this).hide();
                                }
                        });

                        // apply event listeners
                        $(tabItems).bind('click', function(event){
                                ActivateTab($(this));
                        });
                });

                function ActivateTab(tabName) {
                        // pull out the clicked tab details
                        openTab = $(tabName);
                        openTabName = $(tabName).find('a').attr('href')

                        // unactivate the current tab and hide the associated 
area
                        $(currentTab).removeClass('current');
                        $(currentTabName).hide();

                        // activate the new tab
                        $(openTab).addClass('current');
                        $(openTabName).show();

                        // assign the new tab values
                        currentTab = openTab;
                        currentTabName = openTabName;
                }
        }

})(jQuery);
</code>

Reply via email to