[html,js] Rozwijalne menu

Witam, chcę mieć na swojej stronce rozwijalne menu lecz chciałbym aby było napisane przeze mnie. I mam już sporo ale problem w tym że chcę żeby zamykała się poprzednio otwarta kategoria a otwierała ta na którą klikniemy. Stanąłem na tym że zamyka poprzednią ale nie otwiera nowej, trzeba drugi raz kliknąć i dopiero się otworzy.
Tu daje kod:

<script type="text/javascript">
function rozwin(id_kat,max){
	var ile = 2;
	function zwin(ile){
		for (var g=1;g<=ile;g++){
			var sekcja = document.getElementById('kat'+g).innerHTML;
		//	alert(sekcja[sekcja.length-1]);
			if (sekcja[sekcja.length-1] == '^'){
				sekcja=sekcja.substr(sekcja,sekcja.length-2);
				document.getElementById('kat'+g).innerHTML=sekcja;
		
				for (var h=1;h<=5;h++){
					var id = document.getElementById('kat'+g+'-'+h);
					id.style.display = "none";
				}
			}
		}
	}
	
	zwin(ile);
	var kat = document.getElementById('kat'+id_kat).innerHTML;
	var znak = kat[kat.length-1];
	if (znak == '^'){
		kat=kat.substr(kat,kat.length-2);
		document.getElementById('kat'+id_kat).innerHTML=kat;
	} else {
			document.getElementById('kat'+id_kat).innerHTML=kat+' ^'; 
		}
	for (var i=1;i<=max;i++){
	var id = document.getElementById('kat'+id_kat+'-'+i);
//	if (id.style.display == "block"){
//		id.style.display = "none";
//	} else {
		//	alert(id.style.display);
			id.style.display = "block";
			id.onclick;
			
			
//		}
	}
	
return false;
}
</script>
<div class="menu">
    <a id="kat1" class="menu" href="#" onClick="rozwin(1,3);">1</a>
      <a id="kat1-1" class="submenu" href="?menu=1&submenu=1">AF 200</a>
      <a id="kat1-2" class="submenu" href="?menu=1&submenu=6">AF 201</a>
      <a id="kat1-3" class="submenu" href="?menu=1&submenu=3">AF 202</a>
</div>
<div class="menu">
    <a id="kat2" class="menu" href="#" onClick="rozwin(2,4);">2</a>
      <a id="kat2-1" class="submenu" href="?menu=2&submenu=5">AC 200</a>
      <a id="kat2-2" class="submenu" href="?menu=2&submenu=2">AC 201</a>
      <a id="kat2-3" class="submenu" href="?menu=2&submenu=7">AC 201</a>
</div>

Zrób sobie dwie oddziele funkcję. Zwiń i Rozwiń.
Później na zdarzenie onClick. Wywołujesz funkcję zwiń a zaraz po niej rozwiń.

function rozwin(id_kat,max){
(...)
}
function zwin() {
(...)
}
function do(id_kat,max) {
function zwin()
function rozwin(id_kat,max)
}

Tak chyba najprościej.



<div class="menu">
    <a id="kat1" class="menu" href="#" onClick="do(1,3);">1</a>
      <a id="kat1-1" class="submenu" href="?menu=1&submenu=1">AF 200</a>
      <a id="kat1-2" class="submenu" href="?menu=1&submenu=6">AF 201</a>
      <a id="kat1-3" class="submenu" href="?menu=1&submenu=3">AF 202</a>
</div>
<div class="menu">
    <a id="kat2" class="menu" href="#" onClick="do(2,4);">2</a>
      <a id="kat2-1" class="submenu" href="?menu=2&submenu=5">AC 200</a>
      <a id="kat2-2" class="submenu" href="?menu=2&submenu=2">AC 201</a>
      <a id="kat2-3" class="submenu" href="?menu=2&submenu=7">AC 201</a>
</div>

Zrobiłem tak ale nadal to samo ;/

<script type="text/javascript">
	function zwin(ile){
		for (var g=1;g<=ile;g++){
			var sekcja = document.getElementById('kat'+g).innerHTML;
		//	alert(sekcja[sekcja.length-1]);
			if (sekcja[sekcja.length-1] == '^'){
				sekcja=sekcja.substr(sekcja,sekcja.length-2);
				document.getElementById('kat'+g).innerHTML=sekcja;
		
				for (var h=1;h<=5;h++){
					var id = document.getElementById('kat'+g+'-'+h);
					id.style.display = "none";
				}
			}
		}
		return false;
	}
	
function rozwin(id_kat,max){
	var kat = document.getElementById('kat'+id_kat).innerHTML;
	document.getElementById('kat'+id_kat).innerHTML=kat+' ^'; 

	for (var i=1;i<=max;i++){
		var id = document.getElementById('kat'+id_kat+'-'+i);
		id.style.display = "block";
	}
	
return false;
}

function dor(id_kat,max){
	var ile = 2;
	zwin(ile);
	rozwin(id_kat,max);
return false;
}
</script>