Accordion Menu

<div id="cssmenu">
<h2>Menu1</h2>
	<div>
 
	</div>
<h2>Menu2</h2>
	<div>
		<h3>Submenu2-1</h3>
		<div></div>
		<h3>Submenu2-2</h3>
		<div>
			<ul>
				<li>Sub-submenu2-2-1</li>
				<li>Sub-submenu2-2-2</li>
                                <li>Sub-submenu2-2-3</li>
                                <li>Sub-submenu2-2-4</li>
			</ul>
		</div>
                <h3>Submenu2-3</h3>
                <div></div>
                <h3>Submenu2-4</h3>
	</div>
<h2>Menu3</h2>
        <div>
 
		<h3>Submenu3-1</h3>
                <div></div>
                <h3>Submenu3-2</h3>
 
        </div>
<h2>Menu4</h2>
</div>

#cssmenu{
	width:300px;
}
#cssmenu h2, #cssmenu h3, 
#cssmenu div, #cssmenu ul, 
#cssmenu li{
	/* reset stijl voor accordion */
	margin:0;
	padding:0;
	font-size:1em;
	font-weight:normal;
 
}
#cssmenu div{
	display:none;
	color:#555;
	overflow:hidden;
}
#cssmenu h2{
	cursor:pointer;
	color:#fff;
	font-size:1.1em;
	padding:5px;
	margin-top:5px;
	background-color: #999999;
 
 
}
#cssmenu h3{
	cursor:pointer;
	padding:5px;
	color: #666;
 
	background-color: #e1e1e1;
}
#cssmenu h3:hover{
	color:#000;
}
#cssmenu h3 + div{
	background-color: #e9e9e9;
	padding:0px 5px 0px 30px;
}
#cssmenu li:hover{
	color:#000;
	cursor:pointer;
}

$(document).ready(function() {
	var parentDivs = $('#cssmenu div'),
	childDivs = $('#cssmenu h3').siblings('div');
 
	$('#cssmenu h2').click(function(){
		parentDivs.slideUp();
		if($(this).next().is(':hidden')){
			$(this).next().slideDown();
		}else{
			$(this).next().slideUp();
		}
	});
	$('#cssmenu h3').click(function(){
		childDivs.slideUp();
		if($(this).next().is(':hidden')){
			$(this).next().slideDown();
		}else{
			$(this).next().slideUp();
		}
	});
});