multiple tab blocks

Hi All,

I have a small issue with tabbed pages. I am dynamically divs containing 3 tabs
within a page. The number of divs created depends upon the DB table content. When creating
ONE div all is well and the tabbing functionality works as expected. However with 2 or more
divs (that is to say 2 or more sets of 3 tabs) the tabbing functionality breaks down since when one
tab is clicked – say tab 'A' – all the other tabs 'A' in the other divs will also get selected. How can
I replicate the same tabbing functionality so that each tab block remains independent of the others ?

I think that need to assign a unique id to each tab but how could this be linked to the js that I
am using .... shown below ..

$(document).ready(function(){
$(".menu_plans > li").click(function(e){
switch(e.target.id){

case "summary":
//change status & style menu
$("#summary").addClass("active");
$("#policy").removeClass("active");
$("#history").removeClass("active");
//display selected division, hide others
$("div.summary").fadeIn();
$("div.policy").css("display", "none");
$("div.history").css("display", "none");
break;

case "policy":
//change status & style menu
$("#policy").addClass("active");
$("#summary").removeClass("active");
$("#history").removeClass("active");
//display selected division, hide others
$("div.policy").fadeIn();
$("div.summary").css("display", "none");
$("div.history").css("display", "none");
break;

case "history":
//change status & style menu
$("#history").addClass("active");
$("#summary").removeClass("active");
$("#policy").removeClass("active");
//display selected division, hide others
$("div.history").fadeIn();
$("div.summary").css("display", "none");
$("div.policy").css("display", "none");
break;

}

return false;
});
});

Steven M

• Topic Participants

• steven_matthews_uk