title: handle collapsing html table by click on button and not by click to row
body: <p>I am new to Javascript and already set up the collapsing table below with jquery. This already works. I can expand or collapse the complete table or expand and collapse columns by clicking on the row.</p>
  
  <p>But this also changes the view by setting options like BRS or set (see HTML).</p>
  
  <p>What I want is so control all this by the button "+" in the first column (see HTML).</p>
  
  <p>Maybe it's simple maybe not. Can someone help me?</p>
  
  <p>Thanks</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;&lt;html&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="/js/jquery.js"&gt;&lt;/script&gt;&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
          $('.expandable').nextAll('tr').each( function() { // hide all at start
                  if(!($(this).is('.expandable')))
                  $(this).hide();
          });
          $('.expandable').click(function () {   // toggle single by click
                  $(this).nextAll('tr').each( function() {
                          if($(this).is('.expandable')) {
                                  return false; }
                          $(this).toggle();
                  });
          });
   $('#expand_all').click(function() {   // show all
    $('.expandable').nextAll('tr').each( function() {
     if(!($(this).is('.expandable')))
    $(this).show();
    });
   });
   $('#collaps_all').click(function() {   // hide all
    $('.expandable').nextAll('tr').each( function() {
     if(!($(this).is('.expandable')))
    $(this).hide();
    });
   })
  });
  &lt;/script&gt;&lt;title&gt;ConfigPage for CAN on RestbusSimulationStation&lt;/title&gt;
  &lt;body&gt;
  &lt;h2&gt;RSS&lt;/h2&gt;
  &lt;button style="font-size:20px" id="expand_all"&gt;expand all&lt;/button&gt;&lt;button style="font-size:20px" id="collaps_all"&gt;collaps all&lt;/button&gt;
  &lt;table border="1"&gt;
  &lt;tr bgcolor="#fb9d00"&gt;
  &lt;th&gt;&lt;/th&gt;
  &lt;th&gt;FRAMES&lt;/th&gt;
  &lt;th&gt;ID&lt;/th&gt;
  &lt;th&gt;DLC&lt;/th&gt;
  &lt;th&gt;BRS&lt;/th&gt;
  &lt;th&gt;CYCLE/s&lt;/th&gt;
  &lt;th&gt;SET&lt;/th&gt;
  &lt;th&gt;SIGNALS&lt;/th&gt;
  &lt;th&gt;POS&lt;/th&gt;
  &lt;th&gt;Bits&lt;/th&gt;
  &lt;th&gt;select:&lt;/th&gt;
  &lt;th&gt;comput method&lt;/th&gt;
  &lt;th&gt;enum&lt;/th&gt;
  &lt;/tr&gt;
  
  &lt;tr class="expandable"&gt;
  &lt;td&gt;&lt;input type="button" value="+"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;strong&gt;EOCM_CAN8_MSG01&lt;/strong&gt;&lt;/td&gt;
  &lt;td&gt;37&lt;/td&gt;
  &lt;td&gt;16&lt;/td&gt;
  &lt;td&gt;
  &lt;input type="checkbox" name="brs"&gt;
  &lt;/td&gt;
  &lt;td&gt;0.01&lt;/td&gt;
  &lt;td&gt;
  &lt;input type="checkbox" name="frame" checked&gt;
  &lt;/td&gt;
  &lt;tr&gt;&lt;td&gt;&lt;td&gt;&lt;td&gt;&lt;td&gt;&lt;td&gt;&lt;td&gt;
  &lt;td&gt;&lt;span title="Host Vehicle Path Curvature
  "&gt;IHstVhPthCrvt&lt;/span&gt;&lt;/td&gt;
  &lt;td&gt;2&lt;/td&gt;
  &lt;td&gt;15&lt;/td&gt;
  &lt;td&gt;
  &lt;input type="number" name="value" required="required" value="0" min="0" max="32767"&gt;&lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="number" name="enum" min="0" style="width: 3em;"&gt;&lt;/td&gt;
  &lt;/td&gt;
  &lt;/td&gt;&lt;/td&gt;&lt;/td&gt;&lt;/td&gt;&lt;/td&gt;&lt;/td&gt;&lt;/tr&gt;
  
  &lt;tr class="expandable"&gt;
  &lt;td&gt;&lt;input type="button" value="+"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;strong&gt;EOCM_CAN8_MSG01&lt;/strong&gt;&lt;/td&gt;
  &lt;td&gt;37&lt;/td&gt;
  &lt;td&gt;16&lt;/td&gt;
  &lt;td&gt;
  &lt;input type="checkbox" name="brs"&gt;
  &lt;/td&gt;
  &lt;td&gt;0.01&lt;/td&gt;
  &lt;td&gt;
  &lt;input type="checkbox" name="frame" checked&gt;
  &lt;/td&gt;
  &lt;tr&gt;&lt;td&gt;&lt;td&gt;&lt;td&gt;&lt;td&gt;&lt;td&gt;&lt;td&gt;
  &lt;td&gt;&lt;span title="Host Vehicle Path Curvature
  "&gt;IHstVhPthCrvt&lt;/span&gt;&lt;/td&gt;
  &lt;td&gt;2&lt;/td&gt;
  &lt;td&gt;15&lt;/td&gt;
  &lt;td&gt;
  &lt;input type="number" name="value" required="required" value="0" min="0" max="32767"&gt;&lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="number" name="enum" min="0" style="width: 3em;"&gt;&lt;/td&gt;
  &lt;/td&gt;
  &lt;/td&gt;&lt;/td&gt;&lt;/td&gt;&lt;/td&gt;&lt;/td&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>