<ul class="cc_tablist" role="tablist">
    <li class="cc_tab" aria-controls="tab_01" aria-selected="false" role="tab" tabindex="0">Red striped bags</li>
    <li class="cc_tab" aria-controls="tab_02" role="tab" aria-selected="false" tabindex="0">Hygiene bags</li>   
</ul>

<div class="ct_collect tab_content" role="tabpanel" aria-labelledby="tab_01" id="tab_01">You will receive a limited number of red striped bags that will be delivered twice a year.</div>

<div class="ct_collect tab_content" role="tabpanel" aria-labelledby="tab_02" id="tab_02">If you have signed up for the hygiene collection service and have run out of bags, you can</div>

<div class="ct_space"></div>

.cc_tablist, .cc_tablist li {
    list-style: none;
    margin-left: 0px;
    float: left;
    width: auto!important;
}

.cc_tablist {
	padding-left: 0px;
}


.ct_collect, .ct_no_collect, .ct_silver {
    float: left;
    width: 100%;
    border: 1px solid #e4e4e4;
    padding: 15px;
    list-style: none;
    background: #f8f8f8;
    padding-top: 18px;
    margin-top: 9px;
}

var tab_arrays = {};	
	function start_tabs(){
	
		$( ".tab_content" ).each(function() {			
			$( this ).hide();
		});
			
			
			
		// get each tab grouping
		$( ".cc_tablist" ).each(function() {			
			var group_id = $(this).attr('id');
			
			var temp_tab_array = [];
			
			$( "#"+group_id + " .cc_tab").each(function() {				
				var this_tab = $(this).attr('id');				
				temp_tab_array.push(this_tab);
			});
						
			tab_arrays[group_id] = temp_tab_array;			
			
		});
		
		
			
	
		// hide all tabs	
		tab_reset();			
		
					
				
		$('.cc_tab').click(function(e){	
			e.preventDefault();					
			tab_reset();		
			var tab_id = $(this).attr('id');	
			var tab_controls = $(this).attr('aria-controls');						
			$(this).attr('aria-selected',true);
			$(this).addClass('cc_tab_on');

			tab_perform(tab_id, tab_controls);			

		});
	};
	
	
	var last_tab = '';
	
	
	function tab_reset(){			
	
		$('.cc_tab').each(function(){
			$( this ).attr("aria-selected",false);
			$(this).attr('tabindex', 0);
			$(this).removeClass('cc_tab_on');
		});
		
		$( ".tab_content" ).each(function() {
			//$( this ).hide();
			$( this ).attr("aria-hidden","true");									
		});	
	};
	
	
	function tab_perform(tab_id,tab_controls){	
	
			if(last_tab == tab_controls){
				$('#'+tab_controls).slideToggle();						
				tab_reset();
			} else {
				$('.tab_content').hide();
				$('#'+tab_controls).slideToggle();	
			   	
				$('#'+tab_controls).attr('aria-hidden',false);						
				
				// get array group				
				var array_group = $('#'+tab_id).parent().attr('id');				
				$('#'+array_group+' .cc_tab').attr('tabindex', '-1');
				$('#'+tab_id).attr('tabindex', '0');		
			}
		
			last_tab = tab_controls;	
	
	};