/*	The div Expand/Collapse control function
Have you ever created a web page that had so much information on it that some of the key information seems to get lost in all the detail? 
This function that will allow you to list key information and hide the details. Your users have the option of expanding detail sections, 
and the function handles hiding all the other sections.
*/
function ExpandCollapse(ElementId) {
	var ClickedElement = document.getElementById(ElementId);
	var SectionElement = ClickedElement.parentNode;
	var GroupElement = SectionElement.parentNode;
	var SpanSiblings = SectionElement.getElementsByTagName("span");
	var DivSiblings = SectionElement.getElementsByTagName("div");
	if (ClickedElement.innerHTML == "-") {
		// this code turns this section off
		ClickedElement.innerHTML = "+";
		SpanSiblings[1].innerHTML = "Show";
		DivSiblings[0].style.display = "none";
	} else {
		// this code turns this section on and all other sections off
		ClickedElement.innerHTML = "-";
		SpanSiblings[1].innerHTML = "Hide";
		DivSiblings[0].style.display = "block";
		var otherSections = GroupElement.getElementsByTagName("span");
		for (i=0; i<otherSections.length; i++) {
			// first make sure this span is an immediate child of the parent group
			if (otherSections[i].parentNode.id == GroupElement.id ) {
				// next make sure this section is not the one you just expanded
				if (otherSections[i].id != SectionElement.id) {
					// collapse this section
					var x = document.getElementById(otherSections[i].id);
					var SpanSiblings = x.getElementsByTagName("span");
					var DivSiblings = x.getElementsByTagName("div");
					SpanSiblings[0].innerHTML = "+";
					SpanSiblings[1].innerHTML = "Show";
					DivSiblings[0].style.display = "none";
				}
			}
		}
	}
}