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>