function toggleDisplay(item) {
	var clicked = document.getElementById(item) ;
	
	var item1 = document.getElementById('item1') ;
	var item2 = document.getElementById('item2') ;


	var hed1 = document.getElementById('hed1') ;
	var hed2 = document.getElementById('hed2') ;


	var children1 = item1.getElementsByTagName('p') ;
	var children2 = item2.getElementsByTagName('p') ;


	if (clicked.id == 'item1') {	
		toggleBox(hed1) ;
		
		if (children1[0].style.display != 'none') {
			collapse(children1) ;
			expand(children2) ;
			toggleBox(hed2) ;
		}
		
		else {
			expand(children1) ;
			
			if (children2[0].style.display != 'none') {
				collapse(children2) ;
				toggleBox(hed2) ;
			}
			
			else if (children3[0].style.display != 'none') {
				collapse(children3) ;
				toggleBox(hed3) ;
			}
			
			else {
				collapse(children4) ;
				toggleBox(hed4) ;
			}
		}
	}

	else if (clicked.id == 'item2') {	
		toggleBox(hed2) ;
		
		if (children2[0].style.display != 'none') {
			collapse(children2) ;
			expand(children3) ;			
			toggleBox(hed3) ;
		}
		
		else {
			expand(children2) ;
			
			if (children1[0].style.display != 'none') {
				collapse(children1) ;
				toggleBox(hed1) ;
			}
			
			else if (children3[0].style.display != 'none') {
				collapse(children3) ;
				toggleBox(hed3) ;
			}
			
			else {
				collapse(children4) ;
				toggleBox(hed4) ;
			}
		}
	}
		
}

function expand(children) {
	for (var c = 0; c < children.length; c++) {
		children[c].style.display = 'block';
	}
}

function collapse(children) {
	for (var e = 0; e < children.length; e++) {
		children[e].style.display = 'none';
	}
}

function toggleBox(box) { 	
	if (box.className == 'expand') {
		box.className = 'collapse';
	}
	
	else {
		box.className = 'expand';
	}
}