title: jQuery hide children in table
body: <p>Hi I'm making a navigation structure which is has the parent visible on the page load and the children hidden. I'm not entirely sure how I should go about this as I'm not fluent in jQuery. </p>
  
  <p>I tried to using the below line but this was not successful:</p>
  
  <pre><code>findChildren.hide();
  </code></pre>
  
  <p>Anyone have any ideas how I could keep the children hidden until I click the collapse button?</p>
  
  <p>My code is below or click to view a <a href="http://jsfiddle.net/9VdTu/" rel="nofollow">jsFiddle</a>:</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;table id="mytable"&gt;
  &lt;th&gt;Pages&lt;/th&gt;
  &lt;th&gt;Add&lt;/th&gt;
  &lt;th&gt;Edit&lt;/th&gt;
  &lt;th&gt;Remove&lt;/th&gt;
      &lt;tr data-depth="0" class="collapse level0"&gt;
          &lt;td&gt;&lt;span class="toggle collapse"&gt;&lt;/span&gt;Header Links&lt;/td&gt;
          &lt;td&gt;Add&lt;/td&gt;
          &lt;td&gt;Edit&lt;/td&gt;
          &lt;td&gt;Remove&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr data-depth="1" class="collapse level1"&gt;
          &lt;td&gt;Media Library&lt;/td&gt;
          &lt;td&gt;Add&lt;/td&gt;
          &lt;td&gt;Edit&lt;/td&gt;
          &lt;td&gt;Remove&lt;/td&gt;    
          &lt;/tr&gt;
      &lt;tr data-depth="1" class="collapse level1"&gt;
          &lt;td&gt;SJP TV&lt;/td&gt;
           &lt;td&gt;Add&lt;/td&gt;
          &lt;td&gt;Edit&lt;/td&gt;
          &lt;td&gt;Remove&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr data-depth="1" class="collapse level1"&gt;
          &lt;td&gt;Funds&lt;/td&gt;
          &lt;td&gt;Add&lt;/td&gt;
          &lt;td&gt;Edit&lt;/td&gt;
          &lt;td&gt;Remove&lt;/td&gt;
      &lt;/tr&gt;
          &lt;tr data-depth="1" class="collapse level1"&gt;
          &lt;td&gt;Calculators&lt;/td&gt;
          &lt;td&gt;Add&lt;/td&gt;
          &lt;td&gt;Edit&lt;/td&gt;
          &lt;td&gt;Remove&lt;/td&gt;
      &lt;/tr&gt;
          &lt;tr data-depth="1" class="collapse level1"&gt;
          &lt;td&gt;Events&lt;/td&gt;
          &lt;td&gt;Add&lt;/td&gt;
          &lt;td&gt;Edit&lt;/td&gt;
          &lt;td&gt;Remove&lt;/td&gt;
      &lt;/tr&gt;
          &lt;tr data-depth="1" class="collapse level1"&gt;
          &lt;td&gt;Links&lt;/td&gt;
          &lt;td&gt;Add&lt;/td&gt;
          &lt;td&gt;Edit&lt;/td&gt;
          &lt;td&gt;Remove&lt;/td&gt;
      &lt;/tr&gt;
  
  
      &lt;!--Home--&gt;
      &lt;tr data-depth="0" class="collapse level0"&gt;
          &lt;td&gt;Home&lt;/td&gt;
          &lt;td&gt;Add&lt;/td&gt;
          &lt;td&gt;Edit&lt;/td&gt;
          &lt;td&gt;Remove&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;!--About --&gt;
      &lt;tr data-depth="0" class="collapse collapsable level0"&gt;
          &lt;td&gt;&lt;span class="toggle collapse"&gt;&lt;/span&gt;About&lt;/td&gt;
          &lt;td&gt;Add&lt;/td&gt;
          &lt;td&gt;Edit&lt;/td&gt;
          &lt;td&gt;Remove&lt;/td&gt;
      &lt;/tr&gt;
          &lt;!-- Level 2 --&gt;
          &lt;tr data-depth="1" class="collapse level1"&gt;
          &lt;td&gt;About Andy Edwards&lt;/td&gt;
          &lt;td&gt;Add&lt;/td&gt;
          &lt;td&gt;Edit&lt;/td&gt;
          &lt;td&gt;Remove&lt;/td&gt;
      &lt;/tr&gt;
  
       &lt;tr data-depth="1" class="collapse level1"&gt;
          &lt;td&gt;Testimonials&lt;/td&gt;
          &lt;td&gt;Add&lt;/td&gt;
          &lt;td&gt;Edit&lt;/td&gt;
          &lt;td&gt;Remove&lt;/td&gt;
      &lt;/tr&gt;
       &lt;tr data-depth="1" class="collapse level1"&gt;
          &lt;td&gt;Galleries&lt;/td&gt;
          &lt;td&gt;Add&lt;/td&gt;
          &lt;td&gt;Edit&lt;/td&gt;
          &lt;td&gt;Remove&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;!--Working with you--&gt;
      &lt;tr data-depth="0" class="collapse collapsable level0"&gt;
          &lt;td&gt;&lt;!--Span needed for collapse icons--&gt;&lt;span class="toggle collapse"&gt;&lt;/span&gt;Working with You&lt;/td&gt;
          &lt;td&gt;Add&lt;/td&gt;
          &lt;td&gt;Edit&lt;/td&gt;
          &lt;td&gt;Remove&lt;/td&gt;    &lt;/tr&gt;
          &lt;!--Level 2--&gt;
          &lt;tr data-depth="1" class="collapse level1"&gt;
          &lt;td&gt;Working with other specialists&lt;/td&gt;
          &lt;td&gt;Add&lt;/td&gt;
          &lt;td&gt;Edit&lt;/td&gt;
          &lt;td&gt;Remove&lt;/td&gt;
      &lt;/tr&gt;
      &lt;!--Our services--&gt;
      &lt;tr data-depth="0" class="collapse collapsable level0"&gt;
          &lt;td&gt;&lt;!--Span needed for collapse icons--&gt;&lt;span class="toggle collapse"&gt;&lt;/span&gt;Our Services&lt;/td&gt;
          &lt;td&gt;Add&lt;/td&gt;
          &lt;td&gt;Edit&lt;/td&gt;
          &lt;td&gt;Remove&lt;/td&gt;&lt;/tr&gt;
          &lt;tr data-depth="1" class="collapse level1"&gt;
          &lt;td&gt;Investments&lt;/td&gt;
          &lt;td&gt;Add&lt;/td&gt;
          &lt;td&gt;Edit&lt;/td&gt;
          &lt;td&gt;Remove&lt;/td&gt;
          &lt;tr data-depth="1" class="collapse level1"&gt;
          &lt;td&gt;Retirement Planning&lt;/td&gt;
          &lt;td&gt;Add&lt;/td&gt;
          &lt;td&gt;Edit&lt;/td&gt;
          &lt;td&gt;Remove&lt;/td&gt;
          &lt;tr data-depth="1" class="collapse level1"&gt;
          &lt;td&gt;Protecting you and your estate&lt;/td&gt;
          &lt;td&gt;Add&lt;/td&gt;
          &lt;td&gt;Edit&lt;/td&gt;
          &lt;td&gt;Remove&lt;/td&gt;
  
  
  
  &lt;/table&gt;
  </code></pre>
  
  <p>js/js.js</p>
  
  <pre><code>// JavaScript Document
  
  $(function() {
      $('#mytable').on('click', '.toggle', function () {
          //Gets all &lt;tr&gt;'s  of greater depth
          //below element in the table
          var findChildren = function (tr) {
              findChildren.hide();
              var depth = tr.data('depth');
              return tr.nextUntil($('tr').filter(function () {
                  return $(this).data('depth') &lt;= depth;
              }));
          };
  
          var el = $(this);
          var tr = el.closest('tr'); //Get &lt;tr&gt; 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;
      });
  });
  </code></pre>