function accordian(listName) {
	
	//initially hide any child lists of the parent - just as a precaution
	$('#' + listName + ' ul > li')
	.hide()
	
	//open the first list for display initially
	//$('#' + listName + ' ul:first li').slideToggle('slow');
	//$('#' + listName + ' li img.smallActive:first').attr('src', 'images/activeButtonRotated.png')
	
	//on the click event we do this .........
	$('#' + listName + ' li')
	.click(function(e) {
	//e.stopPropagation()
	
	//reset the background image for each top level li
	//$('#' + listName + ' li').css({'background-image':'none'});
		
	//any visible answers we need to toggle and hide
	$('#' + listName + ' ul > li').filter(':visible')
	.slideToggle('fast');
	
	//and reset the image to the default arrow image
	//$('#' + listName + ' li img.smallActive')
	//.attr('src', 'images/documentOff.jpg').show();
	
	
	//if the child list of the line item clicked is hidden then toggle it 
	//(prevents closing and reopening of already open items)	
	if($(this).find('ul li:first').is(':hidden')){

			$(this).find('ul li').show(800);
			
			//then replace the arrow image 
			//$(this).css({'background-image':'url(images/documentOn.jpg)'});
			//$(this).find('img.smallActive').attr('src', 'images/activeButtonRotated.png')
			//$(this).find('img.smallActive').hide();
			
	}
	
			
	})	
	
	
	//on mouseover and mouseout we change the background image and the background colour of the selected list item
	$('#' + listName + ' li ul li').hover(function() {
		
		//alert(jQuery(this).attr('class'))
		
		$(this).css({'background-image':'url(images/documentOn.jpg)','background-color':'#424B6A'});	
	}, function(){
		$(this).css({'background-image':'url(images/documentOff.jpg)','background-color':'#212B4F'});	
	});

	//on mouseover and mouseout of the header category change the colour
	$('#' + listName + ' li span').hover(function() {
				
		$(this).css({'color':'#FFFFFF'});	
	}, function(){
		$(this).css({'color':'#FFAC38'});	
	});				
}