Prototype Close and Open Drop down menu

[tom123]

Hi

Im creating a left side navagation menu. It contains three levels:

 
- Main Group
   - Sub Group
     - Sub Group Link
     - Sub Group Link
     ...
   - Sub Group
   ... 
 - Main Group
   - Sub Group
   ...

When you open a 'Main Group' all other Open Groups should close and then the one selected should open "afterFinish Method form scriptacalous".

I'm having some strange effects, it does close the previously opened 'Main Group' but does not open the selected 'Main Group'. After a few clicks it then strats going a little crazy opening and closing inncorrect 'Main Groups'.

Maybe Ive got my binding wrong?

Javascript:

ADMIN.DeptMenu = function () {
	
	$$('.subMenuToggler').each(function (toggler) {
		toggler.observe('click', function(subMenu) {
			Effect.toggle(subMenu, 'blind', {duration: 0.2, beforeStart:this.checkAllMenuStates.bind(this,subMenu)});
		}.bind(this, toggler.next('ul')));			
	}.bind(this));
};

ADMIN.DeptMenu.prototype.checkAllMenuStates = function (subMenu) {
		
	$$('.open').each( function ( elem ) {
		$(elem).className = 'subMenuToggler closed';
		Effect.toggle(elem.next('ul'), 'blind', {duration:0.2} ); 
	}.bind(this));
		
	if ($(subMenu).style.display == 'none') {
		$(subMenu).previous('a').className = 'subMenuToggler open';
	}
	else {
		$(subMenu).previous('a').className = 'subMenuToggler closed';
	}

Html:

<ul>
	<li class="menuItem">
		<a class="subMenuToggler" href="javascript: void(0);">Line Management</a>	
		
		<ul class="groupSection" style="display: none">
			<li class="subMenuItem">
				<a class="subMenuToggler" href="javascript: void(0);">Transactions</a>		
			
				<ul class="subMenu">
					<li class="subMenuItem"><a href="index.cfm?section=test">Change Bet Outcome</a></li>
					<li class="subMenuItem"><a href="index.cfm?section=test">Reverse Voided Non Action Bets</a></li>
				</ul>
			</li>		
			<li class="subMenuItem">
				<a class="subMenuToggler" href="javascript: void(0);">Transactions</a>		
			
				<ul class="subMenu">
					<li class="subMenuItem"><a href="index.cfm?section=test">Change Bet Outcome</a></li>
					<li class="subMenuItem"><a href="index.cfm?section=test">Reverse Voided Non Action Bets</a></li>
				</ul>
			</li>	
		</ul>
	</li>	
	<li class="menuItem">
		<a class="subMenuToggler" href="javascript: void(0);">Line Management</a>	
		
		<ul class="groupSection" style="display: none">
			<li class="subMenuItem">
				<a class="subMenuToggler" href="javascript: void(0);">Transactions</a>		
			
				<ul class="subMenu">
					<li class="subMenuItem"><a href="index.cfm?section=test">Change Bet Outcome</a></li>
					<li class="subMenuItem"><a href="index.cfm?section=test">Reverse Voided Non Action Bets</a></li>
				</ul>
			</li>		
			<li class="subMenuItem">
				<a class="subMenuToggler" href="javascript: void(0);">Transactions</a>		
			
				<ul class="subMenu">
					<li class="subMenuItem"><a href="index.cfm?section=test">Change Bet Outcome</a></li>
					<li class="subMenuItem"><a href="index.cfm?section=test">Reverse Voided Non Action Bets</a></li>
				</ul>
			</li>	
		</ul>
	</li>	
</ul>