JS Query to toggle table rows is not working

Question

I have the following html page

$('.header').click(function(){
    $(this).nextUntil('tr.header').slideToggle(1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="0">
  <tr  class="header">
    <td colspan="2">Summary 1</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr class="header">
    <td colspan="2">Summary 2</td>
  </tr>
  <tr>
    <td>date</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr class="header">
    <td colspan="2">Summary 3</td>
  </tr>
  <tr>
    <td>date</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table>

when clicked on the .header row(s) they do not collapse or expand I tried in latest versions of firefox, IE and Chrome ... this did not work.

am i missing anything... New to JS/JQuery etc..

Answer 1

For better use i create a class .hidden and i will toggle it on click.

look on

jsFiddle

  $('tr.header').each(function(){
    var self = this;
    $(self).click(function(){
    $(self).nextUntil('tr.header').toggleClass('hidden');
  });
});