Collapsing Tree mit Tabelle in HTML beginnend geschlossen

Question

Ich benutze den Code in diesem Beispiel http://jsfiddle.net/Vd5BH/5/ und ich möchte die Tabellen mit dem Zusammenklappen geschlossen starten, aber ich habe keine Ahnung, wie dies zu tun ist. Jemand weiß? Link http://jsfiddle.net/Vd5BH/5/ Vielen Dank!

HTML

<table id="mytable"> 
    <tr data-depth="0" class="collapse level0"> 
     <td><span class="toggle collapse"></span>Item 1</td> 
     <td>123</td> 
    </tr> 
    <tr data-depth="1" class="collapse level1"> 
     <td><span class="toggle"></span>Item 2</td> 
     <td>123</td> 
    </tr> 
    <tr data-depth="2" class="collapse level2"> 
     <td>Item 3</td> 
     <td>123</td> 
    </tr> 
    <tr data-depth="1" class="collapse level1"> 
     <td>Item 4</td> 
     <td>123</td> 
    </tr> 
    <tr data-depth="0" class="collapse collapsable level0"> 
     <td><span class="toggle collapse"></span>Item 5</td> 
     <td>123</td> 
    </tr> 
    <tr data-depth="1" class="collapse collapsable level1"> 
     <td>Item 6</td> 
     <td>123</td> 
    </tr> 
</table> 

STYLE

table td { 
    border: 1px solid #eee; 
} 
.level1 td:first-child { 
    padding-left: 15px; 
} 
.level2 td:first-child { 
    padding-left: 30px; 
} 

.collapse .toggle { 
    background: url("http://mleibman.github.com/SlickGrid/images/collapse.gif"); 
} 
.expand .toggle { 
    background: url("http://mleibman.github.com/SlickGrid/images/expand.gif"); 
} 
.toggle { 
    height: 9px; 
    width: 9px; 
    display: inline-block; 
} 

JAVASCRIPT

$(function() { 
    $('#mytable').on('click', '.toggle', function() { 
     //Gets all <tr>'s of greater depth 
     //below element in the table 
     var findChildren = function (tr) { 
      var depth = tr.data('depth'); 
      return tr.nextUntil($('tr').filter(function() { 
       return $(this).data('depth') <= depth; 
      })); 
     }; 

     var el = $(this); 
     var tr = el.closest('tr'); //Get <tr> parent of toggle button 
     var children = findChildren(tr); 

     //Remove already collapsed nodes from children so that we don't 
     //make them visible. 
     //(Confused? Remove this code and close Item 2, close Item 1 
     //then open Item 1 again, then you will understand) 
     var subnodes = children.filter('.expand'); 
     subnodes.each(function() { 
      var subnode = $(this); 
      var subnodeChildren = findChildren(subnode); 
      children = children.not(subnodeChildren); 
     }); 

     //Change icon and hide/show children 
     if (tr.hasClass('collapse')) { 
      tr.removeClass('collapse').addClass('expand'); 
      children.hide(); 
     } else { 
      tr.removeClass('expand').addClass('collapse'); 
      children.show(); 
     } 
     return children; 
    }); 
}); 

Answer 1

innerhalb $(document).ready()$('.toggle').click(); als letzten Punkt hinzufügen.

Siehe revised jsFiddle

 //Change icon and hide/show children 
     if (tr.hasClass('collapse')) { 
      tr.removeClass('collapse').addClass('expand'); 
      children.hide(); 
     } else { 
      tr.removeClass('expand').addClass('collapse'); 
      children.show(); 
     } 
     return children; 
    }); 
    $('.toggle').click(); 
});