Collapsing Table Rows via Jquery

Question

Im trying to build a table. The table consists of the following. Each line is a row.

Main-Parent
 + Parent
  - children
  - children
 + Parent
  - children
  - children

The children will collapse into their Parent. And each of the parents will collapse into the Main Parent. Ive got it partially working but not fully. You can see the behavior in http://jsfiddle.net/0Lh5ozyb/88/

HTML

<table class="table">
    <tr class="main-parent" id="">
        <td><div>MAIN PARENT</div></td>
        <td><div>MAIN PARENT</div></td>
        <td><div>MAIN PARENT</div></td>
    </tr>
    <tr class="parent sub" id="row1">
        <td><div>PARENT</div></td>
        <td><div>PARENT</div></td>
        <td><div>PARENT</div></td>
    </tr>

    <tr class="child-row1-1 sub">
        <td><div>CHILD</div></td>
        <td><div>Jackson</div></td>
        <td><div>94</div></td>
    </tr>
    <tr class="child-row1-2 sub">
        <td><div>CHILD</div></td>
        <td><div>Doe</div></td>
        <td><div>80</div></td>
    </tr>
    <tr class="parent sub" id="row2">
        <td><div>PARENT</div></td>
        <td><div>PARENT</div></td>
        <td><div>PARENT</div></td>
    </tr>

    <tr class="child-row2-1 sub">
        <td><div>CHILD</div></td>
        <td><div>Jackson</div></td>
        <td><div>94</div></td>
    </tr>
    <tr class="child-row2-2 sub">
        <td><div>CHILD</div></td>
        <td><div>Doe</div></td>
        <td><div>80</div></td>
    </tr>
</table>

JQUERY

// main heading
$('tr.main-parent')
    .css("cursor", "pointer")
    .click(function () {
        var $children = $(this).nextUntil($('tr').not('.sub'));
        $children.find('td > div, td').slideToggle();
});
$('tr[class^=child-]').find('td > div, td').hide();

// parent heading
$('tr.parent')
    .css("cursor", "pointer")
    .click(function () {
        var $children = $(this).nextUntil($('tr').not('[class^=child-]'));
        $children.find('td > div, td').slideToggle();
});
$('tr.sub').find('td > div, td').hide();

Loren Paulsen · Accepted Answer · 2015-05-31T21:16:25.970

1

slideToggle can't be used for the main heading because the child headings may be in mixed states of visibility. You were simply inverting which subheadings were visible.

If at least one is visible you need them all to close.

// main heading
$('tr.main-parent')
    .css("cursor", "pointer")
    .click(function () {

        var $children = $(this).nextUntil($('tr').not('.sub'));

        if ($children.find(':visible').length) {
            $children.find('td > div, td').slideUp();
        }       
        else {
            $children.find('td > div, td').slideDown();
        }
});

See: http://jsfiddle.net/0Lh5ozyb/120/

EDIT

If you would like to only show the subheadings when opening the main heading, filter to them first:

$children.filter('.parent').find('td > div, td').slideDown();

Updated example: http://jsfiddle.net/0Lh5ozyb/133/

edited May 31 '15 at 21:16

answered May 31 '15 at 21:05

Loren Paulsen

8,960
1
28
38

Thanks - if you collapse everything and then main parent. If you expand, everything is shown. Anyway to change that. – felix001 May 31 '15 at 21:08
certinaly did, thanks. though jyst trying to sort out the jerky ness when i apply this to my real life tables which are largish.... http://stackoverflow.com/questions/30608747/table-with-slidetoogle-randomly-jerky – felix001 Jun 05 '15 at 12:02

Collapsing Table Rows via Jquery

1 Answers1