CODEWITHSUNDEEP
jquery
Adam Pavlov
Adam Pavlov

Reputation: 307

Table row hide/collapse

In given example hide/collapse play well, but when I click on "L-C" link(bg-yellow) of "This is parent 1" it show only one hidden tr that is "This is 1st Child" when there are 2 hidden layer bellow "This is parent 1", I need when I click on "L-C" both hidden layer open at a time, check the HTML structure removing ".hidden" class from CSS.

HTML :

<table>
    <tr>
        <td class="details-control"><a>L-O</a></td>
        <td>This is parent 1</td>
    </tr>
    <tr class = "hidden">
        <td></td>
        <td>This is 1st Child</td>
    </tr>
    <tr class = "hidden">
        <td></td>
        <td>This is 2nd Child</td>
    </tr>
    <tr>
        <td class="details-control"><a>L-O</a></td>
        <td>This is parent 2</td>
    </tr>
    <tr class = "hidden">
        <td></td>
        <td>This is 1st Child</td>
    </tr>
</table>

CSS :

a {width:50px; display: block; background: yellow}

.hidden {
    display: none;
}

.details-control {
    cursor:pointer;
}

jQuery :

$('.details-control').click(function() {
    var $td = $(this);

    if ($td.html() == '<a>L-O</a>') {
        $td.html('<a>L-C</a>');
        $td.parent().next(".hidden").show();
    } else {
        $td.html('<a>L-O</a>');
        $td.parent().next(".hidden").hide();
    }  
})

JSFiddle Here

Upvotes: 0

Views: 1060

Answers (2)

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

You can use nextUntil() and toggleClass() methods. Also you can shorten your js like following.

$('.details-control').click(function () {
    var $td = $(this);
    var text = $td.html() == '<a>L-O</a>' ? '<a>L-C</a>' : '<a>L-O</a>';
    $td.html(text);
    $td.parent().nextUntil('tr:has(.details-control)').toggleClass('hidden');
})

UPDATED FIDDLE

Upvotes: 1

rrk
rrk

Reputation: 15846

Use nextUntil(), with :not() pseudo selector.

$td.parent().nextUntil(":not('.hidden')").show();

DEMO

Upvotes: 1

Related Questions