Something

var state = new Array();
var boxslide = new Array();
var maxheight = new Array();

function toggleDiv(id){
	var e = document.getElementById(id);
	var h = parseInt(e.style.height);
	var tags = document.getElementById("sidepanel").getElementsByTagName("div");
	
	for(var i=0; i <tags.length; i++){
		
		if( tags[i].id.match("side") && state[tags[i].id] == "opened" && tags[i].id != id ){
			cp = tags[i].id;			
		}
	}
	if (typeof cp == 'undefined'){
		cp = "none"
		state[cp] = "closed";
	}
	if( !state[id] ){
		state[id] = "closed";
	}
	if( boxslide[id] != null )
		clearInterval(boxslide[id]);
	
	if( state[id] == "opened" ){
		state[id] = "closed";
		boxslide[id] = setInterval("decrSize('" + id + "')",10);

	}
	
	else if( state[cp] == "opened" ){
		state[cp] = "closed";
		state[id] = "opened";
		boxslide[cp] = setInterval("decrSize('" + cp + "')",10);
		boxslide[id] = setInterval("incSize('" + id + "')",10);
	}
		
	else{
		state[id] = "opened";
		boxslide[id] = setInterval("incSize('" + id + "')",10);
	}
}
function incSize(id){
	var e = document.getElementById(id);
	var h = parseInt(e.style.height);
	//alert("e: " + e + ", h: " + h);
	if( h < maxheight[id]){
		e.style.height = h + 10 + "px";
	}
	else
		clearInterval(boxslide[id]);
}
function decrSize(id){
	var e = document.getElementById(id);
	var h = parseInt(e.style.height);
	//alert("e: " + e + ", h: " + h);
	if( h > 0){
		e.style.height = (h - 10) + "px";
	}
	else
		clearInterval(boxslide[id]);
}
// A general function to add an event handler
function addHandler(obj, evt, newhandler, captures) {
	if (obj.attachEvent) {
		obj.attachEvent('on' + evt, newhandler);
	}
	else if (obj.addEventListener) {
		obj.addEventListener(evt, newhandler, captures);
	}
	else {
		var oldhandler;
		if (oldhandler = obj['on' + evt]) {
			obj['on' + evt] = function() {
				oldhandler();
				newhandler();
			}
		}
		else {
			obj['on' + evt] = newhandler;
		}
	}
}
//pane swapping function, add fade!
//function swapPanes2(contentToShow, contentToHide) {
//	document.getElementByClass(contentToShow).style.display = "block";
//	document.getElementByClass(contentToHide).style.display = "none";
//}

function swapPanes(contentToShow, contentToHide) {
	var panes = document.getElementsByTagName("*");
		for (i=0; i<panes.length; i++) {
			if (panes[i].className==contentToShow) {
				panes[i].style.display='block';
			}
			else if (panes[i].className==contentToHide) {
				panes[i].style.display='none';
			}
		}
}


// Attach an onLoad handler to the window to initially hide all the toggle DIV objects.
// Only do it if sufficient JS capability is present in the browser
if (document.getElementById && document.getElementsByTagName) {
	addHandler(window,'load',init,false);
}
function init(){
	var tags = document.getElementById("sidepanel").getElementsByTagName("div");
	var panes = new Array();
	
	for(var i=0; i <tags.length; i++){
		if( tags[i].id.match("side") ){
			id = tags[i].id;
			maxheight[id] = tags[id].offsetHeight;
			tags[id].style.height = "0px";
			tags[id].style.visibility = "visible";
		}
	}
	toggleDiv('side1')
}