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>