Collapsing Menu Issue

[cooldude832]

I have a left menu on a site that has a strucutre like

[b]<ul id='cat_top'>
<li>
	<a onclick='cat_toggle(1);'>arts</a>
	<ul class='cat_inner' id='1'></ul>
</li>
<li>
	<a onclick='cat_toggle(3);'>bars</a>
	<ul class='cat_inner' id='3'></ul>
</li>
<li>	
	<a onclick='cat_toggle(2);'>greek</a>
	<ul class='cat_inner' id='2'></ul>
</li>
</ul>

When I click on the title the sub cats load in fine and the sub cats of those load in just fine using this AJAX Request

 

function cat_toggle(CatID){
if(cat_open == CatID){
	document.getElementById(CatID).style.display='none';
	cat_open = 0;
}
else{
	document.getElementById(CatID).style.display='block';
	cat_open = CatID;
	var xmlhttp;
	if (window.XMLHttpRequest){
		// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	}
	else if (window.ActiveXObject){
		// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	else{
		alert("Your browser does not support XMLHTTP!");
	}
	xmlhttp.onreadystatechange=function(){
		if(xmlhttp.readyState==4){
			document.getElementById(CatID).innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","cats.php?p="+CatID,true);
	xmlhttp.send(null);
}
}

 

The issue I am having is when I have a 2 level deep menu open it takes 2 click to close down the parent when I would expect 1.

 

You can see it at http://kseego.net