gregdoolittle.com

wrote some code at work the other day to make expandable lists using the DOM. i can’t show you the site until it’s finished, but you can click here to see an implementation of the code, to get a better idea of what it does. here it is:

function toggle(switcher) {
	if(document.getElementById) {

		reappearing = switcher.parentNode.nextSibling.nextSibling;
		reappearing.style.display=reappearing.style.display==
			'block'?
			'none':
			'block'
		;
		alternating = switcher.parentNode.firstChild;
		alternating.style.backgroundImage=(
			alternating.style.backgroundImage==
	  		"some-url/images/minus.gif)"?
	  		"some-url/images/plus.gif)":
	  		"some-url/images/minus.gif)")
		;
	}
}

<!--if the dom is not supported... -->
if(!document.getElementById) {
	document.write('<style type="text/css"><!--#' + id +
	'{display:block;}//--></style>');
}

if you’d like to use it on your site, keep in mind the main thing you’ll be changing is the string of parentNode/firstChild/nextSibling’s to match your document hierarchy…