Programming the DOM

Use no itemBox API, but we use itemHolder.initElements() and itemHolder.removeElementById() to reset an itemBox.

Simple expandable box. expand no drag, no width, not on. Initial open, closed width determined own min-width
It is a good idea look at the source
and inspect elements 
function changeContent(id){
	var boxContent=document.getElementById(id);
	boxContent.innerHTML="<div>Something else</div>";
}
 
function changeHeaderColor(id,c){
	var head=document.querySelector("#"+id+"Wrapper .header");
	head.style.backgroundColor = c;
}

function changeHeaderText(id,t){
	var head=document.querySelector("#"+id+"Wrapper .header");
	head.replaceChild(document.createTextNode(t),head.firstChild);
}
 
function lockExpand(id){
	var tog=document.querySelector("#"+id+"Wrapper .toggler");
	tog.style.display="none";
}
 
//-------- reset stuff ------
// the only box we will remember
var originalBox1=null;
 
function rememberOriginal(id){
	var box=document.getElementById(id);
	return box.cloneNode(true);
}

function resetBox(id,original){
	// set back orional, undeteced element
	var box=document.getElementById(id+"Wrapper");
	var holder=box.parentNode;
	holder.replaceChild(original.cloneNode(true),box);
	
	// take it away from boxlist and rebuild
	// will detect only new (not ready) itemBox elements
	itemHolder.removeAndRebuild(id);
}

// must be done before we run itemHolder.initElements();
// and after the box is parsed
originalBox1=rememberOriginal('box1');