CODEWITHSUNDEEP
jqueryshow-hide
alexleonard
alexleonard

Reputation: 1314

Toggling table rows in a faux nested fashion with jQuery

I've been trying to work out an issue with toggling multiple rows of a table depending on their owner.

I start with only master rows showing, and then when I click to toggle the master row it shows the group rows only, and if I click a group row, it shows any contained account rows.

I can close them again, but if I close the overall Master row while there are still account rows open, they stay open.

This is the method I've been using thus far: http://jsfiddle.net/fHKcy/

Now, I know, I should be using nested divs.. but I'm stuck with an old CMS and being required to use tables..!

I have a vague feeling I might be able to do it by wrapping each "group" in a tbody.. hmm, might test that after dinner..

One thing I was trying was adding the following in after $('[data-owner="' + parentId +'"]').hide();

if(accountType == 'master') {
    $('[data-owner="' + parentId +'"]').find('[data-account-level="account"]').hide();
}

but I just couldn't get it working.

Upvotes: 0

Views: 678

Answers (3)

dora
dora

Reputation: 1344

Try this jsfiddle with a simple table

$(document).ready(function () {
    $(".hide").hide();
    $(".show").click(function () {
        $(this).nextUntil(".show").toggle();
    });
});

Upvotes: 1

alexleonard
alexleonard

Reputation: 1314

Nothing like a night's sleep to help solve an issue.

As I suspected in my original post - use of tbody elements with the data-owner attribute would work.

So now the master level 'owns' a tbody element that follows it:

<!-- MASTER ACCOUNT -->
<tr id="test1" class="pa-dt-master-account-level" data-account-level="master">
    <td class="pa-dt-account-details">
        <a class="pa-dt-toggle" href="#">Toggle</a><br />
        Test1
    </td>
</tr>
<tbody data-owner="test1">
    <tr> // etc
</tbody>

The javascript doesn't change.

// Define our button for toggling
var button = $( "table.pa-dynamic-table a.pa-dt-toggle" );

button.click(function() {
    // get the parent ID
    var parentId = $(this).parents('tr').attr("id");
    // get the parent account level
    var accountType = $(this).parents('tr').attr("data-account-level");

    console.log(parentId);
    console.log(accountType);

    if ($(this).hasClass("pa-dt-toggle-active")) {
        $(this).removeClass('pa-dt-toggle-active');
        $('[data-owner="' + parentId +'"]').hide();

    } else {
        $(this).addClass('pa-dt-toggle-active');
        $('[data-owner="' + parentId +'"]').show();
    }
});

You can see it working here: http://jsfiddle.net/dKpxV/2/

Only issue is that this method probably wouldn't work with more levels than current.. however it does have the advantage of retaining the open/closed states of the group level items.

Yes this definitely would be much easier with a nested list..

Upvotes: 0

John - Not A Number
John - Not A Number

Reputation: 659

You could do this pretty simply by adding classes to your table rows. Give the child rows a class dependent on their parent row, and then just show the child rows when the parent row gets selected (and hide any child rows of the previously selected parent).

Upvotes: 0

Related Questions