$(document).ready(function() {
 	$("#tabs-list > ul > li").click(function(){
		
		/*
		 * The tab list item must be named with an id like this <li id="tab1">Benefits</li>
		 * The tabs must have a matching content tab <div id="content1" class="tab-panels-content"> 
		 */
		var tabContentId = $(this).attr("id");
		var tabNumber = tabContentId.substr(3);
		tabContentId = "content" + tabNumber;
		//alert(tabContentId);
		
		//Remove active class from others then add active class to the tab clicked
		$("#tabs-list > ul > li").removeClass("active active-first-tab");
		if(tabNumber == '1'){
			$(this).addClass("active-first-tab");
		}else{
			$(this).addClass("active");
		}
		
		
		$("#tab-panels > div").hide();		
		$("#tab-panels > div#" + tabContentId + "").show();
	});
	
	
	
	/*Sub Tab Content
	/*
	 * The list item must have an id - <a href="" id="textiles-and-bags"> and a matching content div id
	 * <div class="sub-tab-content" id="textiles-and-bags-content">
	 */
	$("#prod-exp-list > li > a").click(function(){
		
		var subTabContentId = $(this).attr("id");
		subTabContentId = subTabContentId + "-content";
		
		//Remove active class from others then add active class to the tab clicked
		$("#prod-exp-list > li > a").removeClass("active active-first-tab active-last-tab");
		
		$(this).addClass("active");		
		
		$("#prod-exp-content > div").hide();		
		$("#prod-exp-content > div#" + subTabContentId + "").show();
		return false;
	});
   
 });