Bootstrap/jquery click to show multiple hidden rows in a table

Question

I've tried several different solutions to this [found here on stack exchange] but seem unable to get my example working.

How do I set this table up so that clicking on the 'clickable' TR shows all the hidden rows after it?

here is the [condensed] table, note it's bootstrap3 'hover' type:

<table class="table table-condensed table-hover dashboard">

    <thead>
        <tr><th></th><th></th></tr>
    </thead>

    <tbody>
        <tr class='clickable' id="68" >
            <td>visible row</td>
            <td>&nbsp;</td>
        </tr>
        <tr class="collapse out budgets" id="68collapsed">
            <td>hidden row</td>
            <td>&nbsp;</td>
        </tr>
        <tr class="collapse out budgets" id="68collapsed">
            <td>hidden row</td>
            <td>&nbsp;</td>
        </tr>

        <tr class='clickable' id="69" >
            <td>visible row</td>
            <td>&nbsp;</td>
        </tr>
        <tr class="collapse out budgets" id="69collapsed">
            <td>hidden row</td>
            <td>&nbsp;</td>
        </tr>
        <tr class="collapse out budgets" id="69collapsed">
            <td>hidden row</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

and here is the bit of JS I'm using to [try] to reveal the hidden rows.

$(".clickable").click(function() {
    var id = $(this).attr('id');
    var target = '#'+id+'collapsed';

    if($(target).hasClass("out")) {
        $(target).addClass("in");
        $(target).removeClass("out");
    } else {
        $(target).addClass("out");
        $(target).removeClass("in");
    }
});

Clicking on the 'clickable' row, only shows the first [or maybe last] hidden TR.

Answer 1

Use data-toggle='collapse' and data-target. Also, use class instead of id on the child rows.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<table>
  <thead>
    <tr><th></th><th></th></tr>
</thead>
<tbody>
    <tr class="clickable" data-toggle="collapse" id="68" data-target=".68collapsed">
        <td>visible row</td>
        <td>&nbsp;</td>
    </tr>
    <tr class="collapse out budgets 68collapsed">
        <td>hidden row</td>
        <td>&nbsp;</td>
    </tr>
    <tr class="collapse out budgets 68collapsed">
        <td>hidden row</td>
        <td>&nbsp;</td>
    </tr>

    <tr class="clickable" id="69" data-toggle="collapse" data-target=".69collapsed">
        <td>visible row</td>
        <td>&nbsp;</td>
    </tr>
    <tr class="collapse out budgets 69collapsed">
        <td>hidden row</td>
        <td>&nbsp;</td>
    </tr>
    <tr class="collapse out budgets 69collapsed">
        <td>hidden row</td>
        <td>&nbsp;</td>
    </tr>
</tbody>
</table>

Demo: https://codeply.com/p/3FKaTSrWEA

Answer 2

You are using the same id on multiple rows. Assign 68collapsed, 69collapsed as class and not id.

Here's the jsfiddle: http://jsfiddle.net/9Y6Y6/

Basically, id is meant to uniquely identify an element. So your current JavaScript only picks up the first element with the id and changes it.

The relevant changes are:

<tr class="collapse out budgets 68collapsed">

(same for all tr's)

and then the line in the js:

var target = '.'+id+'collapsed';

. instead of # to indicate its a class not an id.

Answer 3

$(".clickable").click(function() {
    $(this).nextUntil('.clickable').show();
});

https://api.jquery.com/nextUntil/