// Simple Collapsing and Expanding Elements in Javascript
// (c) 2005, Gavin Lynch

//on mouse down, launch flagship function
document.onmousedown = ExpandCollapseInsideElement;

//expands and collapses elements based on markup order, element id's, and previous state
function ExpandCollapseInsideElement(trigger)
{
	//deteremine browser object and assign even source
	if (trigger)
	{
		//Mozilla compatability: gets element action takes place on
		var container_obj = trigger.target;
	}
	if (window.event)
	{
		//IE compatability: gets element action takes place on
		var container_obj = window.event.srcElement;
	}

	//if it is the 'trigger' (as indicated by element id) and is a child of the element 'parent', proceed
	if (container_obj.id == 'trigger' && container_obj.parentNode.id == 'parent')
	{
		//assign array containing all child nodes of function triggering element
		var child_nodes = container_obj.parentNode.childNodes

		for (var x = 0; x < child_nodes.length; x++)
		{
			//if the element was given an id and the id is named 'child', proceed
			if (child_nodes[x].id && child_nodes[x].id == 'child')
			{
				//if the child was hidden, reveal. if the child was showing, hide. adjust graphics accordingly
				if (child_nodes[x].style.display == 'block' || child_nodes[x].style.display == '')
				{					
					child_nodes[x].style.display = 'none';
				}
				else
				{					
					child_nodes[x].style.display = 'block';
				}
			}
		}
	}
}