Bootstrap / jquery Click to show some hidden rows in the table.

Question

I tried several different solutions for this [found here in the stack exchange], but didn't seem to be able to get my example to work.

How to configure this table so that clicking on "clickable" TR shows all hidden rows after it?

here is the table [compressed], pay attention to the bootstrap3 type 'hover':

<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 JS bit that I use to [try] open hidden lines.

$(".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");
    }
});

By clicking on the "clickable" line, you will see only the first [or, possibly, the last] hidden TR.

Answer 1

data-toggle='collapse' data-target. , id .

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

: http://www.bootply.com/122870

Answer 2

id . 68collapsed, 69collapsed , id.

jsfiddle: http://jsfiddle.net/9Y6Y6/

, id . , JavaScript .

:

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

( tr)

js:

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

. #, id.

Answer 3

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

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