Untitled



<body>
<table>
   <tr>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
            <a id="myHeader1" href="javascript:toggle2('myContent1','myHeader1');" >collapse</a>
         </div>
         <div id="myContent1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
            <a id="myHeader2" href="javascript:toggle2('myContent2','myHeader2');" >collapse</a>
         </div>
         <div id="myContent2" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #2</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
            <a id="myHeader3" href="javascript:toggle2('myContent3', 'myHeader3');" >collapse</a>
         </div>
         <div id="myContent3" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #3</div>
      </td>
   </tr>
</table>
<input type="button" value="Press me to toggle all 3 DIVs" onClick="toggle3(['myContent1', 'myContent2', 'myContent3'], ['myHeader1', 'myHeader2', 'myHeader3']);">

<script>

function toggle2(showText,title) {
	var ele = document.getElementById(showText);
	var text = document.getElementById(title);
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "restore";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "collapse";
	}
}


function toggle3(contentDiv,controlDiv){
	if(contentDiv.constructor==Array)
		for(i=0; i<contentDiv.length; ++i)
			toggle2(contentDiv[i],controlDiv[i]);
	else
		toggle2(contentDiv,controlDiv);
}

</script>

</body>