title: Javascript - Expand/Collapse table rows
body: <p>Given the following table/code, I'd like to add two items. I don't know JavaScript well enough and this code was left by another programmer. The code works as expected in every other way.</p>
  
  <p>Here are the two items:</p>
  
  <ol>
  <li>The table should start in a collapsed state. All nodes should be
  collapsed to the 'Grandparent' level.</li>
  <li>There should be a link for 'expand all' and a separate 'collapse all' link. </li>
  </ol>
  
  <p>Here is the table I'm using:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
          $('#mytable').on('click', '.toggle', function () {
              var findChildren = function (tr) {
                  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');
              var children = findChildren(tr);
      
              var subnodes = children.filter('.expand');
              subnodes.each(function () {
                  var subnode = $(this);
                  var subnodeChildren = findChildren(subnode);
                  children = children.not(subnodeChildren);
              });
      
              if (tr.hasClass('collapse')) {
                  tr.removeClass('collapse').addClass('expand');
                  children.hide();
              } else {
                  tr.removeClass('expand').addClass('collapse');
                  children.show();
              }
              return children;
          });
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table td, th {
          border: 1px solid #eee;
          font-family: Arial;
          font-size: 16px;
      }
      .level0 td:first-child {
          padding-left: 5px;
      }
      .level1 td:first-child {
          padding-left: 25px;
      }
      .level2 td:first-child {
          padding-left: 50px;
      }
      .level3 td:first-child {
          padding-left: 75px;
      }
      
      .collapse .toggle {
          background: url("open.gif");
          background-repeat: no-repeat;
      }
      .expand .toggle {
          background: url("closed.gif");
          background-repeat: no-repeat;
      }
      .toggle {
          height: 20px;
          width: 20px;
          display: inline-block;
      }
      .age {
              text-align: center;
      }
      .nam {
              text-align: left;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;table id="mytable" style="border-collapse: collapse" cellpadding="6"&gt;
          &lt;thead&gt;
          &lt;tr&gt;
              &lt;th width="250px"&gt;Type&lt;/th&gt;
              &lt;th width="50px"&gt;Age&lt;/th&gt;
              &lt;th width="50px"&gt;Name&lt;/th&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
      
          &lt;tr data-depth="0" class="collapse level0"&gt;
              &lt;td&gt;&lt;span class="toggle collapse"&gt;&lt;/span&gt;GRANDPARENT&lt;/td&gt;
              &lt;td class="age"&gt;80&lt;/td&gt;
              &lt;td class="nam"&gt;Ethel&lt;/td&gt;
          &lt;/tr&gt;
      
          &lt;tr data-depth="1" class="collapse level1"&gt;
              &lt;td&gt;&lt;span class="toggle"&gt;&lt;/span&gt;CHILD 1&lt;/td&gt;
              &lt;td class="age"&gt;55&lt;/td&gt;
              &lt;td class="nam"&gt;Susan&lt;/td&gt;
          &lt;/tr&gt;
      
          &lt;tr data-depth="2" class="collapse level2"&gt;
              &lt;td&gt;&lt;span class="toggle collapse"&gt;&lt;/span&gt;GRANDCHILD 1&lt;/td&gt;
              &lt;td class="age"&gt;32&lt;/td&gt;
              &lt;td class="nam"&gt;Kristen&lt;/td&gt;
          &lt;/tr&gt;
      
          &lt;tr data-depth="3" class="collapse collapsable level3"&gt;
              &lt;td&gt;GREAT GRANCHILD 1&lt;/td&gt;
              &lt;td class="age"&gt;12&lt;/td&gt;
              &lt;td class="nam"&gt;Layla&lt;/td&gt;
          &lt;/tr&gt;
      
          &lt;tr data-depth="1" class="collapse collapsable level1"&gt;
              &lt;td&gt;&lt;span class="toggle collapse"&gt;&lt;/span&gt;CHILD 2&lt;/td&gt;
              &lt;td class="age"&gt;52&lt;/td&gt;
              &lt;td class="nam"&gt;Joanne&lt;/td&gt;
          &lt;/tr&gt;
      
          &lt;tr data-depth="2" class="collapse collapsable level2"&gt;
              &lt;td&gt;&lt;img src="list.gif"/&gt;GRANDCHILD 2&lt;/td&gt;
              &lt;td class="age"&gt;28&lt;/td&gt;
              &lt;td class="nam"&gt;Marie&lt;/td&gt;
          &lt;/tr&gt;
      
      &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What do I need to add to the JavaScript to accomplish this?</p>