/* 
note for these 2 functions to work you need these styles in the css:
.collapsed {display:none;}
.expanded {display:block;}

use menu if you want to switch off menus as others are clicked, 
or just use toggle if you want to leave them on/off
*/

function menu(clicked) {
	if (typeof active=='undefined') {
	// if active doesnt exist initialise it
		active='nothing';
	} else if (active!='nothing') {
	// but otherwise toggle whichever SubMenu was active, or if nothing was active, do nothing
		toggle(active);
	}
	// only do these steps if active is not the same as who
	if (clicked!=active) {
		toggle(clicked);
	}
	// record which menu is now 'active'
	active=clicked;
	// but now check its on and wasnt toggled off - if it was set active to nothing
	if (document.getElementById(clicked+'SubMenu').className=='collapsed') {	
		active='nothing'
	}
}	
	
function toggle(id) {
	var element = document.getElementById(id);
	if (element) {
		if (element.className=='collapsed') {
			element.className='expanded';
		} else if (element.className=='expanded') {
			element.className='collapsed';
		}
	}
}

function toggleDisplay(id) {
	var element = document.getElementById(id);
	
	if (element.style.display == ""){
  		element.style.display = "none";
	}
	else {
  		element.style.display = "";
	}
}