HTML TreeView

CSS:

table.treeview {
 border-collapse:collapse;
 border:0;
}
table.treeview td {
 padding:0 2px 0 0;
 vertical-align:middle;
}
table.treeview td img.minus {
 cursor:pointer;
}
table.treeview td img {
 margin:0;
}
table.treeview td input {
 margin:0;
}

HTML:

<table class="treeview"><tbody><tr>
<td><img src="img/d.gif" /></td><td><input type="checkbox" /></td><td><img src="img/female.png" /></td><td>Goverment</td>
</tr><tr>
<td><img src="img/d.gif" /></td><td><input type="checkbox" /></td><td><img src="img/find.png" /></td><td>Health</td>
</tr><tr>
<td><img src="img/m.gif" class="minus" /></td><td><input type="checkbox" /></td><td><img src="img/flashdisk.png" /></td><td>Recreation & Sports</td>
</tr><tr>
<td></td><td colspan="3">
 <table class="treeview"><tbody><tr>
 <td><img src="img/d.gif" /></td><td><input type="checkbox" /></td><td><img src="img/folder.png" /></td><td>Goverment</td>
 </tr><tr>
 <td><img src="img/d.gif" /></td><td><input type="checkbox" /></td><td><img src="img/font.png" /></td><td>Health</td>
 </tr><tr>
 <td><img src="img/d.gif" /></td><td><input type="checkbox" /></td><td><img src="img/group.png" /></td><td>Recreation & Sports</td>
 </tr></tbody></table>
</td>
</tr><tr>
<td><img src="img/d.gif" /></td><td><input type="checkbox" /></td><td><img src="img/help.png" /></td><td>Health</td>
</tr></tbody></table>

javascript:

var oTV = new TreeView();
function TreeView(){
 var oElems = document.getElementsByClassName("minus");
 var nEl;
 for (nEl = 0; nEl<oElems.length; nEl++){
  oElems[nEl].onclick = Toggle;
 }
 function Toggle(e){
  var oEl = e.target;
  var oElTab = oEl.parentNode.parentNode.nextSibling;
  if (oEl.src.slice(-9) === "img/m.gif"){
   oEl.src = "img/p.gif";
   oElTab.style.display="none";
  } else {
   oEl.src = "img/m.gif";
   oElTab.style.display="table-row";
  } 
 }
}