CODEWITHSUNDEEP
jqueryrowsexpand
cycero
cycero

Reputation: 4771

Expand certain rows in a table with jQuery

I have a table and want to make some of the rows expandable - clicking on a row will expand several other rows under that parent row. Not all the rows should be expandable. jQuery will be fine. Could anybody give me a hint on how this can be achieved or point to a manual?

Thanks.

Upvotes: 2

Views: 11438

Answers (2)

Mark Coleman
Mark Coleman

Reputation: 40863

We had a similar request on a project at my work. Here is a quick sample I did on jsfiddle.

<table>
    <tbody>
        <tr class="main">
            <td >
                <span class="expand">
                    expand</span>
            </td>
            <td>
                Show
            </td>
            <td>
                Show
            </td>
        </tr>
        <tr class="hidden">
            <td colspan="3">
                hidden 1
            </td>
        </tr>
        <tr class="hidden">
            <td colspan="3">
                hidden 2
            </td>
        </tr>
</table>

And now the jQuery

$("td span.expand").click(function() {
    $(this).parents("tr.main").nextUntil("tr.main").toggle();
});

This example uses nextUntil which will continue to select elements until it hits a defined selector, in this case tr.main

Upvotes: 7

Kris Ivanov
Kris Ivanov

Reputation: 10598

here is some easy tutorial http://designgala.com/how-to-expand-collapse-toggle-div-layer-using-jquery/, just convert to handle table rows, however you should consider using divs

Upvotes: 0

Related Questions