// JavaScript Document
function toggleMaterials(el) {
// This will give us the element that contains the <a> elements and <div> elements that we want to "relate" to each other.
		var container = el.parentNode;
// This will find all the <a> elements (links) in the group; this finds _all descendants_ of the parent <div>.
		var links = el.parentNode.getElementsByTagName('a');
// This will find all the <div> elements that are parallel siblings to the <a> elements; this finds _all descendants_ of the parent <div>.
		var divs = el.parentNode.getElementsByTagName('div');
// Now we'll start the main loop that ultimately determines which item to show/hide.
		for(var i=0;i<divs.length;i++) {
// This is a quick way to refer to the <a> items and <div> items in the loop.
			var div = divs[i];
			var link = links[i];
// Now we need to ensure that the <a> items and <div> items are both _direct_ children of the parent <div>; this allows
// us to put additional <div> or <a> items inside of these other <div> items, and things won't fall apart.
			if(div.parentNode===container && link.parentNode===container) {
// Now we show/hide based on whether the element that was passed (the 'this' that was clicked, see markup below)
// is the same one as the 'current' one in the loop.  If it is, then its display is set to 'block' (visible);
// if it isn't, its dislay is set to 'none' (invisible).
			    div.style.display = (link===el) ? 'block' : 'none';
			}
		}
	}
// This is an abstraction of the toggleMaterials() function that will simply _hide_ everything.
	function hideAllMaterials(el) {
		var container = el.parentNode;
		var divs = el.parentNode.getElementsByTagName('div');
		for(var i=0;i<divs.length;i++) {
			var div = divs[i];
			if(div.parentNode===container) {
				div.style.display = 'none';
			}
		}
	}
// This is an abstraction of the toggleMaterials() function that will simply _show_ everything.
	function showAllMaterials(el) {
		var container = el.parentNode;
		var divs = el.parentNode.getElementsByTagName('div');
		for(var i=0;i<divs.length;i++) {
			var div = divs[i];
			if(div.parentNode===container) {
				div.style.display = 'block';
			}
		}
	}