function tabChanger(el, cont, tabGroup)
{
	var thisGroup = document.getElementById(tabGroup); // the ID of the "tabPosition" div
	var totalTabCount = thisGroup.getElementsByTagName("span"); // Creates an array that has a length indicating the total number of tabs in the tab group
	var nameDelim = "_"; // this is a part of the naming convention - as in tab_1, or content_1 - will be used as a delimiter
	var newTab = el; // the id of the element being clicked on
	var contNameCon = cont; // the naming convention for the content - as in the word content in 'content_1'
	var tabSplit = newTab.split(nameDelim); // create an array out of the names in the id of the element being clicked on by splitting on the nameDelim delimiter
	var tabNameCon = tabSplit[0]; // the first part of the ID, indicates the naming convention
	var changeTab = tabSplit[1]; // the second part of the ID, indicates the number pair for the content and tab
	var selectCSS = "selected"; // the class name of the CSS style that makes a tab look selected
	var notSelectCSS = "notSelected"; // the class name of the CSS style that makes a tab look unselected
	
	for(var i = 1; i <= totalTabCount.length; i++) // loop over all of the tabs
	{
		var tabName = tabNameCon + nameDelim + i; // create the tab id
		var contName = contNameCon + nameDelim + i; // create the content id that corresponds to the tab id
		var tabID = document.getElementById(tabName); // find the tab element
		var contID = document.getElementById(contName); // find the content element
		
		if (changeTab == i) // if the current tab is the same tab as the one that was clicked on
		{
			tabID.className = selectCSS; // change that tabs class to the "selected" CSS style
			contID.style.display = "block"; // change that content style.display property so that it is visible
		}
		else
		{  		
			tabID.className = notSelectCSS; // change that tabs class to the "unselected" CSS style
			contID.style.display = "none"; // change that content style.display property so that it is invisible
		}
	}
}