Unobtrusive Expand and Collapse Navigation

Javascript:

{Download Javascript}

function init(){
	//Check to see if we can use the DOM
	if(!document.getElementById) return;
	if(!document.getElementsByTagName) return;
	if(!document.createElement) return;
	
	//Get all the UL's in the Navigation
	var navigation = document.getElementById('nav');
	var navSub = navigation.getElementsByTagName('ul');
	
	//Go through all the Sub Nav's - give them a hidden class, inject in the toogle graphic
	for (i=0; i<navSub.length; i++){
		
		//Create the Image to inject in
		var toggleImage = document.createElement('img');
		toggleImage.setAttribute('src', 'img/expand.gif');
		toggleImage.style.cursor = "pointer";
		toggleImage.onclick = function() {
			toggleNav(this);
		}
		
		//Get the Parent of the UL, and insert the Image before the first child
		navSub[i].parentNode.insertBefore(toggleImage, navSub[i].parentNode.firstChild);
		
		//Hide the Sub Navigation using a CSS Class and assign a class to the parent for styling
		navSub[i].style.display="none";
		navSub[i].parentNode.className = "expandable";
	}
	
	var expandLink = document.createElement('li');
	expandLink.innerHTML = "Expand All"
	
	var collapseLink = document.createElement('li');
	collapseLink.innerHTML = "Collapse All"
		
	//Add them to the Bottom of the Navigation
	navigation.appendChild(expandLink);
	navigation.appendChild(collapseLink);
}

function toggleNav(whichOne){
	if (whichOne.getAttribute('id') == "expandAll") {
		var navigation = document.getElementById('nav');
		var navigationULs = navigation.getElementsByTagName('ul');
		var allImages = navigation.getElementsByTagName('img');
		for (i = 0; i < navigationULs.length; i++) {
				navigationULs[i].style.display = "block";
				allImages[i].setAttribute('src', 'img/contract.gif')
		
		}
	}
	else if (whichOne.getAttribute('id') == "collapseAll"){
		var navigation = document.getElementById('nav');
		var navigationULs = navigation.getElementsByTagName('ul');
		var allImages = navigation.getElementsByTagName('img');
			for (i = 0; i < navigationULs.length; i++) {
				navigationULs[i].style.display = "none";
				allImages[i].setAttribute('src', 'img/expand.gif')
			}
	}
	else {
		var theParent = whichOne.parentNode;
		var theParentULs = theParent.getElementsByTagName('ul');
		var theParentImage = theParent.getElementsByTagName('img');
		
		//Grab just the first UL and the first toggle image so that sub-sub UL navs/image don't expand too
		if (theParentULs[0].style.display == "none") {
			theParentULs[0].style.display = "block";
			theParentImage[0].setAttribute('src', 'img/contract.gif');
		}
		else {
			theParentULs[0].style.display = "none";
			theParentImage[0].setAttribute('src', 'img/expand.gif');
		}
	}
}

window.onload = init;

CSS:

#nav, #nav ul{
	list-style:none;
	margin-left:20px;
}

#nav ul{
	padding-top:.5em;
}

#nav li{
	padding-left:17px;
	background: url(../img/arrow.gif) left top no-repeat;
	padding-bottom:.45em;
}

#nav a{
	text-decoration:none;
	color:#960000;
}

#nav a:hover{
	color:#1b53b9;
}

#nav .expandable{
	padding-left:0px;
	background-image:none;
}

#nav .expandable img{
	margin-right:5px;
}

#expandAll, #collapseAll {
	font-weight:bold;
	background-image:none;
}

Image Assets:

Unobtrusive Expand and Collapse Navigation Script by Bradley J. Cooper is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.