Collapse HTML table rows by default

Question

I'm using slight modification from this answer to make header rows collapsible in an HTML table.

I want to modify the JS snippet so that rows are collapsed rather than expanded by default (on page load/document ready). How can I do this?

Basically what I'm trying to achieve is for:

$(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
$(this).nextUntil('tr.header').slideToggle(100, function(){

to be run once at page load/refresh, in addition to when header rows are clicked and toggled.

I know that I'll need to change the two tags two <span>+</span> in HTML, but am stuck on how to trigger this behavior on page load.

Javascript:

$(document).ready(function(){
    $('tr.header').click(function(){
        $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
        $(this).nextUntil('tr.header').slideToggle(100, function(){
        });
    });
});

HTML:

<table border="0">
  <tr  class="header">
      <th colspan="2">Header <span>-</span></th>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr  class="header">
    <th colspan="2">Header <span>-</span></th>
  </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>

CSS:

table, tr, td, th
{
    border: 1px solid black;
    border-collapse:collapse;
}
tr.header
{
    cursor:pointer;
}

JSFiddle: https://jsfiddle.net/mkb39x0u/

score 3 · Accepted Answer · answered Mar 29 '19 at 13:59

3

Seems like you'd just do this in document.ready:

$('tr:not(.header)').hide();

Demo

Also, I'd probably toggle visibility of your plus and minus characters with a class on the row and CSS rather than cluttering up your script with that.

answered Mar 29 '19 at 13:59

isherwood

58,414
16
114
157

Hassan Siddiqui · Answer 2 · 2019-03-29T14:46:27.147

I just update your code with few JS changes, I hope it'll help you out. Thanks

Add below JS code before your click method

$('tr.header').nextUntil('tr.header').slideToggle(100);

$(document).ready(function(){
    $('tr.header').nextUntil('tr.header').slideToggle(100);
    $('tr.header').click(function(){
        $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
        $(this).nextUntil('tr.header').slideToggle(100, function(){
        });
    });
});

table, tr, td, th {
    border: 1px solid black;
    border-collapse:collapse;
}
tr.header {
    cursor:pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0">
  <tr  class="header">
      <th colspan="2">Header <span>-</span></th>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr  class="header">
    <th colspan="2">Header <span>-</span></th>
  </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>

Another way you can achieve this functionality by using CSS

$(document).ready(function(){
    $('tr.header').click(function(){
        $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
        $(this).nextUntil('tr.header').slideToggle(100, function(){
        });
    });
});

table {
  border-collapse: collapse;
}

tr {
  border: 1px solid #000;
  display: none;
}

td + td {
  border-left: 1px solid #000;
}

tr + tr {
  border-top: 0;
}

tr.header {
  cursor: pointer;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0">
  <tr  class="header">
      <th colspan="2">Header <span>-</span></th>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr  class="header">
    <th colspan="2">Header <span>-</span></th>
  </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>

Collapse HTML table rows by default

2 Answers2