jQuery(document).ready(function($){
	
	//these 2 lines will open the first bar when page loads
	//$(".accordion h3:first").addClass("h3Hover");
	//$(".accordion div:not(:first)").hide();
	//but we want to hide all when page loads
	$(".accordion div").hide();

	$(".accordion h3").click(function(){
		//these 3 lines will open & close bar regardless of other bars open/close status
		//$(this).next("div").slideToggle("fast");
		//$(this).toggleClass("h3Hover");
		//$(this).siblings("h3").removeClass("h3Hover");
		//we want there can be only one bar to be open at a time
		var this_display_status = $(this).next("div").css("display");
		if (this_display_status == 'none') {
			$(".accordion div").slideUp("slow");
			$(".accordion h3").removeClass('h3Hover');
			$(this).next("div").slideDown("slow");	
			$(this).addClass("h3Hover");
		}
	});
	
	$(".accordion h3").hover(function(){
			$(this).addClass('h3Hover');
		}, function() {
			var this_display_status = $(this).next("div").css("display");
			if (this_display_status == 'none') {
				$(this).removeClass('h3Hover');
			}
	});

});
