title: expand/collapse have one row show while the others are hidden
body: <p>this is in a cognos list.
  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</p>
  
  <p>first layer (shown)
                            second layer(hidden)
                                                          third layer(hidden)</p>
  
  <p>My JS code is below and for the life of me I can't figure it out. Any help would be greatly appreciated. </p>
  
  <pre><code>function StartHidden() {
     var q=document.getElementById("ExpandedTable");
  
     // get the table
     tbl = q.parentNode.parentNode.parentNode.parentNode;
     var isFirstRow=true;
  
     for ( var i = 0; i &lt; tbl.rows.length; i++) {
            var trCurrent = tbl.rows; // the current row
            var d = trCurrent.cells[0]; // first cell
            var c = d.firstChild;
  
            if (i &lt; 2 || c.tagName.indexOf("IMG") != -1) {
                   c = c.src; // leave it visible, since it has + icon
  for ( var j = 1; j &lt; trCurrent.cells.length; j++) {
     trCurrent.cells[j].width="1"; 
  }
            }
            else {
                   trCurrent.style.display = "none"; // hide the row
            }
     }
  }
  </code></pre>