title: Make table rows collapsible with jQuery
body: <p>I have a table with some rows. Each row get a <code>data-id</code> attribute and all 'child' nodes get a <code>data-parent-id</code> attribute.</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr data-id="1"&gt;&lt;/tr&gt;
        &lt;tr data-id="1-1" data-parent-id="1"&gt;&lt;/tr&gt;
          &lt;tr data-id="1-1-1" data-parent-id="1-1"&gt;&lt;/tr&gt;
            &lt;tr data-id="1-1-1-1" data-parent-id="1-1-1"&gt;&lt;/tr&gt;
      &lt;tr data-id="2&gt;&lt;/tr&gt;
        &lt;tr data-id="2-1" data-parent-id="2"&gt;&lt;/tr&gt;
        &lt;tr data-id="2-2" data-parent-id="2"&gt;&lt;/tr&gt;
          &lt;tr data-id="2-2-1" data-parent-id="2-2"&gt;&lt;/tr&gt;
          &lt;tr data-id="2-2-2" data-parent-id="2-2"&gt;&lt;/tr&gt;
          &lt;tr data-id="2-2-3" data-parent-id="2-2"&gt;&lt;/tr&gt;
      &lt;tr data-id="3"&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I have made indentions in the code, so it's easier to see child/parent relationship.</p>
  
  <p>How can I make these table rows collapsible?</p>
  
  <p>I have made this javascript</p>
  
  <pre><code>$('tr[data-id]').css('cursor', 'pointer').click(function() {
      var parentId = $(this).attr('data-id');
  
      // set status
      $(this).toggleClass('expanded collapsed');
  
      // collapse/expand child nodes
      $("tr[data-parent-id='" + parentId + "']").toggleClass('hidden');
  
      // icon
      $(this).children('td').children('i').toggleClass('fa-caret-right fa-caret-down');
  });
  </code></pre>
  
  <p>It does collapse and expand the table rows, but if all the rows are expanded and I try to collapse of the 'highest leveled' nodes it only collapses the first child, but not the deeper levels.</p>
  
  <p>How can I make sure it collapses an entire level?</p>
  
  <p>I thought of using <code>nextAll('tr[data-parent-id]').each(function ....</code> something.</p>