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..

Have you included jQuery script in `$(document).ready(function(){ //Your code here });` ? — Pugazh, Sep 21 '16 at 08:37
@Pugazh Meaning should the jquery be like like this$(document).ready(function(){ $('.header').click(function(){ $(this).nextUntil('tr.header').slideToggle(1000); }); }); — siva, Sep 21 '16 at 08:48
@siva Your example seems like working, can you guide me with the exact problem ? — Mohit Tanwani, Sep 21 '16 at 08:50
The problem is when i open the html file in a browser, (IE firefox, chrome) this toggle does not work! — siva, Sep 21 '16 at 08:56

score 0 · Answer 1 · answered Sep 21 '16 at 09:00

0

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');
  });
});

answered Sep 21 '16 at 09:00

Franky238

511
5
21

JS Query to toggle table rows is not working

1 Answers1