expand collapse with all rows hidden but one

[thegiff]

So I know a lot of JS but obviously not enough to figure this out. I have a list, and in that list I have a hierarchy going that will expand several layers in. I want all layers to start hidden but the first layer. So something like this

first layer (shown)
                          second layer(hidden)
                                                        third layer(hidden)

My JS code is below and for the life of me I can't figure it out. Any help would be greatly appreciated.

function StartHidden() {
       var q=document.getElementById("ExpandedTable");

       // get the table
       tbl = q.parentNode.parentNode.parentNode.parentNode;
       var isFirstRow=true;

       for ( var i = 0; i < tbl.rows.length; i++) {
              var trCurrent = tbl.rows; // the current row
              var d = trCurrent.cells[0]; // first cell
              var c = d.firstChild;

              if (i < 2 || c.tagName.indexOf("IMG") != -1) {
                     c = c.src; // leave it visible, since it has + icon
for ( var j = 1; j < trCurrent.cells.length; j++) {
       trCurrent.cells[j].width="1";
}
              }
              else {
                     trCurrent.style.display = "none"; // hide the row
              }
       }
}