Creating collapsible rows in HTML using JS

Question

I am trying to create a table with collapsible rows in HTML using JS but its simply not working. Nothing happens when I click on the row with the class header1 Here's the code I've written:

<html>
<body>
<table>
<tr style="background-color: darkcyan;">
  <th>Column 1</th>
  <th>Column 2</th>
  <th>Column 3</th>
  <th>Column 4</th>
  <th>Column 5</th>
</tr>

<tr class="header1">
  <td colspan="5">Header Row</td>
</tr>

<tr>
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
</tr>

<tr>
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
</tr>

</table>

<script>
$('.header1').click(function(){
$(this).nextUntil('tr.header1').slideToggle(1000);
});
</script>
</body>
</html>

Can someone tell me if I'm doing anything wrong?

$(this).nextUntil('tr.header1').slideToggle(1000); instead of 1000 give 10 or something, the toggle occurs faster. — Bhavana, Dec 15 '16 at 10:49
@Bhavana It seems to be working on Fiddle but when I put that exact code in a file and run it on either Chrome or Firefox it's simply not responding. — Saksham Arora, Dec 15 '16 at 10:57
Have you added jquery Library properly to your project folder? Can you check your console what error is there? — Manoj Lodhi, Dec 15 '16 at 11:07

score 0 · Answer 1 · answered Dec 15 '16 at 11:08

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.header1').click(function(){
$(this).nextUntil('tr.header1').slideToggle(10);
});
});
</script>
</head>
<body>
<table>
<tr style="background-color: darkcyan;">
  <th>Column 1</th>
  <th>Column 2</th>
  <th>Column 3</th>
  <th>Column 4</th>
  <th>Column 5</th>
</tr>

<tr class="header1">
  <td colspan="5">Header Row</td>
</tr>

<tr>
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
</tr>

<tr>
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
</tr>

</table>
</body>
</html>

I tried this code in w3schools editor it worked fine. Added the jQuery reference .

score 0 · Accepted Answer · answered Dec 15 '16 at 11:08

$('.header1').click(function(){
$('.data').slideToggle(100);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body>
<table>
<tr style="background-color: darkcyan;">
  <th>Column 1</th>
  <th>Column 2</th>
  <th>Column 3</th>
  <th>Column 4</th>
  <th>Column 5</th>
</tr>

<tr class="header1">
  <td colspan="5">Header Row</td>
</tr>

<tr class="data">
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
</tr>

<tr class="data">
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
</tr>

</table>


</body>

Even your code is working. change it to '100' delay. why don't you give another class called 'data' in tag where data are present.

<tr class="data">
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
</tr>

then try this.

$('.header1').click(function(){
$('.data').slideToggle(100);
});

it will toggle all tags with class "data".

score 0 · Answer 3 · edited May 23 '17 at 12:30

If you give a static height to your table rows the slideToggle is much more visible, but not quite as smooth as if you did it on a div. See the attached jsFiddle (and hat tip to this post that showed me the way):

$('.header1').click(function(){
$(this).nextUntil('tr.header1').slideToggle('fast');
});

    table tr td {
    border: 1px solid aqua;
    }

table tr {
height: 100px;
}

tr.header1 {
cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
  <head>
  </head>
<body>
<table>
<tr style="background-color: darkcyan;">
  <th>Column 1</th>
  <th>Column 2</th>
  <th>Column 3</th>
  <th>Column 4</th>
  <th>Column 5</th>
</tr>

<tr class="header1">
  <td colspan="5">Header Row</td>
</tr>

<tr>
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
</tr>

<tr>
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
  <td>Data</td>
</tr>

</table>
</body>
</html>

Creating collapsible rows in HTML using JS

3 Answers3