A little something about everything

Simple script to show and hide multiple div's

Example:

Spotlight 1, Spotlight 2, Spotlight 3

<script language="javascript">
function getElementsByClass( searchClass, domNode, tagName) {
	if (domNode == null) domNode = document;
	if (tagName == null) tagName = '*';
	var el = new Array();
	var tags = domNode.getElementsByTagName(tagName);
	var tcl = " "+searchClass+" ";
	for(i=0,j=0; i<tags.length; i++) {
		var test = " " + tags[i].className + " ";
		if (test.indexOf(tcl) != -1)
			el[j++] = tags[i];
	}
	return el;
}
function ShowHide(bioname) {
	var bios = getElementsByClass('bio');
	for(i=0; i<bios.length; i++)
		bios[i].style.display = 'none';
	document.getElementById(bioname).style.display='block';
}
</script>
<style>
#bio2,#bio3 {
	display: none;
}
</style>
<p>Simple script to show and hide multiple div's</p><p>Example:</p>
<p>
<a href="#" onclick="ShowHide('bio1');">Spotlight 1</a>,
<a href="#" onclick="ShowHide('bio2');">Spotlight 2</a>, 
<a href="#" onclick="ShowHide('bio3');">Spotlight 3</a></p>
<div id="bio1" class="bio" style="width:400px;margin:10px;padding:10px;border:1px solid #000;box-shadow: 0 0 5px #000;"><h4 style="color:#000;">Spotlight 1 content</h4>
</div>
<div id="bio2" class="bio" style="width:400px;margin:10px;padding:10px;border:1px solid #f00;box-shadow: 0 0 5px #f00;"><h4 style="color:#f00;">Spotlight 2 content</h4>
</div>
<div id="bio3" class="bio" style="width:400px;margin:10px;padding:10px;border:1px solid #0f0;box-shadow: 0 0 5px #0f0;"><h4 style="color:#0f0;">Spotlight 3 content</h4>
</div>