accordion with jquery

HTML

<div id="wrapper">
		<div class="category-eoi">monday</div>
		<div class="post-content">sunny<br /><br /><br /><br /><br /><br /><br /><br />more weather</div>
		<div class="category-eoi">tuesday</div>
		<div class="post-content">sunny<br /><br /><br /><br /><br />more weather</div>
		<div class="category-eoi">wednesday</div>
		<div class="post-content">sunny<br />more weather</div>
		<div class="category-eoi">thursday</div>
		<div class="post-content">sunny<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />more weather</div>
	</div>

CSS

#wrapper {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	}
 
.category-eoi {	
	width: 800px;
	float: left;
	background: #003366;
	border-bottom: 1px solid #FFFFFF;
	cursor: pointer;
	}
 
.post-content {	
	width: 800px;
	float: left;
	background: #95B1CE;
	display: none;
	}

JavaScript

$(document).ready(function() {
 
	//ACCORDION BUTTON ACTION	
	$('div.category-eoi').click(function() {
		$('div.post-content').slideUp('normal');	
        if(!$(this).next().is(':visible'))
        {
		    $(this).next().slideDown('normal');
        }
	});
 
	//HIDE THE DIVS ON PAGE LOAD	
	$("div.post-content").hide();
 
});