How to make accordion nav collapse

JavaScript
1

Hey everyone. If you go here: http://store.inspirationsdancewear.c…inekey=4888254 you will see when you click on one of the side nav links, it drops down to display the sub-categories. If you open another link in the side nav it will also display the sub-categories, BUT the first sub-category box does NOT slide back up (which I want it to do). So, if you click on the “shoes” link the subcategories appear, and then if you click on say “bodywear” the “shoes” sub-categories slide back up and the “bodywear” sub categories slide out. Like it does here: http://www.dynamicdrive.com/dynamici...enu-bullet.htm I just don’t know what to include in the javascript to make it do that.

<div id="leftwrapper">
<h2 style="margin-top:-25px; padding-bottom:15px; color:#900; margin-left:15px; font-size:1.2em">Shop Online</h2>	

<?php

function print_childs($categ){
	
	$childs = $categ->categ_childs;
	
	if(!$childs || (count($childs) == 0)){
		echo "</a>";
		return;
	}
		
		echo "&raquo;</a><ul>\
";
	foreach($childs as $category){
		
		if(!$category->HasChildOrProduct())
			continue;
		
		?>
		
<li><a class="childcats" href="<?= $category->Link; ?>"><?= $category->Name; ?><?php print_childs($category); ?></a></li>
		<?php
		
	}
	echo "</ul><br/>\
";
	
	
}

?>

		<div id="left">
			
<?php foreach($this->menu_categories as $category):  ?>	
<h2 class="headings"> <?= $category->Name; ?></h2>

<div>
<a class="childcats" href="<?= $category->Link; ?>">  See all <?= $category->Name; ?> <?php print_childs($category); ?></a>

</div>						
							
<?php endforeach; ?>
					
<?php if(_xls_get_conf('ENABLE_FAMILIES', 1)): ?>								
<?php $families = Family::LoadAll();?>
<?php foreach($families as $family): ?>
<a href="index.php?family=<?= $family->Family ?>"><?= $family->Family ?></a>
<?php endforeach; ?>
								
								<?php endif; ?>
						
</div></div>

//----------------------------NAVIGATION DROPDOWN------------------------------------//
sfHover = function() {
		var sfEls = document.getElementById("left").getElementsByTagName("h2");
		for (var i=0; i<sfEls.length; i++) {
			sfEls[i].onmouseover=function() {
				this.className+=" sfhover";
			}
			sfEls[i].onmouseout=function() {
				this.className=this.className.replace(new RegExp(" sfhover\\\\b"), "");
			}
		}
	}
	if (window.attachEvent) window.attachEvent("onload", sfHover);
	
	
function initMenu() {
		  $('#left div').hide();
		  $('#left h2').click(
		    function() {
		        $(this).next().slideToggle('normal');	
		      }
		    );
		  }
		$(document).ready(function() {initMenu();});