JS code to show/hide 1 or more nested tables under a data row

Question

I am currently building a page that uses some jquery to show and hide a series of tables and nested tables. On the page, there is the main table around all the data. Under that is the data for that table, which is also defined as a parent table (class = "parent"). The parent table may be associated with either one, two, or no child tables (class = "child"; class = "child1").

I have the javascript written so that on load, all the child tables are hidden. If a child table is associated with a parent table, there will be a [+] symbol that can be pressed to expand that nested table for the user to view. The basic javascript says that if a row is defined as a "parent" and the next tr element is a "child", then hide that element on load. Furthermore, when the 'a' element is clicked (which I have set to [+]), then this will expand and collapse that child 'tr' element, which in this case is the nested table. Additionally, only one parent table may have it's child tables expanded at a time. Here is the jsfiddle for this basic functionality:

http://jsfiddle.net/rUgfW/9/

Now what I ultimately need to do is account for three different possibilities: 1) There is a 'tr.parent' element that is followed by a 'tr.child' element (this is currently handled in the previous jsfiddle code). 2) There is a 'tr.parent' element that is followed by a 'tr.child1' element (child1 represents a different child table, with a different data set than 'tr.child'). 3) There is a 'tr.child' element that is followed by a 'tr.child1' element (this would be if a 'tr.parent' had both types of child tables associated with it).

I have created the javascript code to hide all of the child tables on load, which satisfies all three of the defined possibilities. This was achieved simply by adding the additional two conditions:

$('tr.parent').next('tr.child1').hide();
$('tr.child').next('tr.child1').hide();

The problem I am facing is that I am not sure how to go about defining the $child variable to encompass all three possibilities. This would be necessary in order to show and hide the child tables. I tried to use an IF test, but I'm pretty sure my logic (and probably my syntax) is incorrect:

if ('tr.parent').next('tr.child') != null
     {
     $child = $this.closest('tr.parent').next('tr.child');
     }
if ('tr.parent').next('tr.child1') != null
     {
     $child = $this.closest('tr.parent').next('tr.child1');
     }
if ('tr.child').next('tr.child1') != null
     {
     $child = $this.closest('tr.child').next('tr.child1');
     }

Here is the jsfiddle:

http://jsfiddle.net/rUgfW/16/

As you can see, adding this series of IF statements breaks the hide on load functionality, and doesn't work at all.

Does anyone have any suggestions on how I can go about satisfying all three of these requirements? (Thanks in advance)

jQuery never returns `null`. See [exists function for jQuery](http://stackoverflow.com/questions/31044/is-there-an-exists-function-for-jquery) — Bergi, Oct 09 '13 at 13:23
Your entire `if` statement needs to be encapsulated by parentheses: `if($('tr.parent').next('tr.child') != null) { /*code*/ }` — Bucket, Oct 09 '13 at 13:26
Is this what you are looking for? http://jsfiddle.net/gbM6D/ — Sergio, Oct 09 '13 at 13:41

Sergio · Accepted Answer · 2013-10-09T14:19:58.580

You have a comma wrong here:

var $this = $(this), //not comma here! Should be ";"

also:

if (('tr.parent').next('tr.child') != null) {
    ^ missing a $ here??

Two more things:

use right syntax for if statement: if(statement){code} with ()
This will never be null $('tr.parent').next('tr.child'), it will always be a jQuery object. Maybe you should have if($('tr.parent').next('tr.child').length){

Suggestion

$(document).ready(function () {
    $('tr[class^=child]').hide();
    $('a.toggle').on('click', function (e) {
        e.preventDefault();
        var $this = $(this);
        var nxt = $this.closest('tr.parent').nextAll('tr').each(function(){
            if($(this).hasClass('parent')){return false; }
            $(this).toggle();
        });
    })
});

Demo here

score 0 · Answer 2 · answered Oct 09 '13 at 13:30

I think you're looking for

var $parent = $this.closest('tr.parent'),
    $child = $parent.next('tr.child');
if ($child.length == 0) {
    $child = $parent.next('tr.child1');
    if ($child.length == 0) {
        $child = $this.closest('tr.child').next('tr.child1');
    }
}

JS code to show/hide 1 or more nested tables under a data row

2 Answers2

Demo here