How do I make accordion nav collapse?

JavaScript
1

Hey everyone. I posted this yesterday, but the URL was not working so I’m re-posting (sorry about that). If you go here:

http://store.inspirationsdancewear.com/?xls_offlinekey=4888254

you will see an “accordion” navigation on the left side. It opens and contracts like it should, HOWEVER I need to add the following functionality.

  1. I want to have ONLY 1 “parent” category displaying it’s “child” categories at a time. So when I open another “parent” link, I want the previous one to collapse, so only 1 accordion is open at a time (right now you are able to open all of them without the other ones collapsing).

  2. When I select a “child” category from the “parent” category, I need the menu to stay open when going to the “child” category page and I also need the relevant “child” category to be “highlighted” so the user knows which page they are on.

Please let me know if you can help me with any of this. I would GREATLY appreciate it!!

<script type="text/javascript">
	//----------------------------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();});
		
</script>

<?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="leftwrapper">

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

		<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>