Javascript - Expand/Collapse table rows

Question

Given the following table/code, I'd like to add two items. I don't know JavaScript well enough and this code was left by another programmer. The code works as expected in every other way.

Here are the two items:

The table should start in a collapsed state. All nodes should be collapsed to the 'Grandparent' level.
There should be a link for 'expand all' and a separate 'collapse all' link.

Here is the table I'm using:

$(function() {
        $('#mytable').on('click', '.toggle', function () {
            var findChildren = function (tr) {
                var depth = tr.data('depth');
                return tr.nextUntil($('tr').filter(function () {
                    return $(this).data('depth') <= depth;
                }));
            };
    
            var el = $(this);
            var tr = el.closest('tr');
            var children = findChildren(tr);
    
            var subnodes = children.filter('.expand');
            subnodes.each(function () {
                var subnode = $(this);
                var subnodeChildren = findChildren(subnode);
                children = children.not(subnodeChildren);
            });
    
            if (tr.hasClass('collapse')) {
                tr.removeClass('collapse').addClass('expand');
                children.hide();
            } else {
                tr.removeClass('expand').addClass('collapse');
                children.show();
            }
            return children;
        });
    });

table td, th {
        border: 1px solid #eee;
        font-family: Arial;
        font-size: 16px;
    }
    .level0 td:first-child {
        padding-left: 5px;
    }
    .level1 td:first-child {
        padding-left: 25px;
    }
    .level2 td:first-child {
        padding-left: 50px;
    }
    .level3 td:first-child {
        padding-left: 75px;
    }
    
    .collapse .toggle {
        background: url("open.gif");
        background-repeat: no-repeat;
    }
    .expand .toggle {
        background: url("closed.gif");
        background-repeat: no-repeat;
    }
    .toggle {
        height: 20px;
        width: 20px;
        display: inline-block;
    }
    .age {
            text-align: center;
    }
    .nam {
            text-align: left;
    }




        
        
            Type
            Age
            Name
        
        
    
        
            GRANDPARENT
            80
            Ethel
        
    
        
            CHILD 1
            55
            Susan
        
    
        
            GRANDCHILD 1
            32
            Kristen
        
    
        
            GREAT GRANCHILD 1
            12
            Layla
        
    
        
            CHILD 2
            52
            Joanne
        
    
        
            GRANDCHILD 2
            28
            Marie

What do I need to add to the JavaScript to accomplish this?

Takit Isy · Accepted Answer

Is this the kind of result you want ?
(I played a little with your code to make it work more or less like I think it should.)

Anyway, I don't understand all about what has been done, and I propose you only a JS solution.
But… I think the classes in your trs could be modified to get your “all hidden” result at the loading of the page without using any JS.
I commented where I added the new things:
EDIT: And I cleaned a little the code, too.

$('.collapse').on('click', function() {
  //console.log($(this).attr('data-depth'));
  var findChildren = function(tr) {
    var depth = tr.data('depth');
    return tr.nextUntil($('tr').filter(function() {
      return $(this).data('depth') <= depth;
    }));
  };

  var children = findChildren($(this));
  if ($(children).is(':visible')) {
    $(this).addClass("closed");
    $(children).hide();
  } else {
    $(this).removeClass("closed");
    $(children).show();
    var children = findChildren($(".closed"));
    $(children).hide();
  }

});


// HERE IS THE CODE I ADDED
$('#show_all').on('click', function() {
  $("#mytable tr.collapse").removeClass("closed").show();
});
$('#hide_all').on('click', function() {
  $("#mytable tr.collapse:not([data-depth='0'])").hide();
  $("#mytable tr.collapse.level0").addClass("closed");
});
$(document).ready(function() {
  $('#hide_all').trigger('click');
});

table td,
th {
  border: 1px solid #eee;
  font-family: Arial;
  font-size: 16px;
}

.level0 td:first-child {
  padding-left: 10px;
}

.level1 td:first-child {
  padding-left: 30px;
}

.level2 td:first-child {
  padding-left: 50px;
}

.level3 td:first-child {
  padding-left: 70px;
}

.age {
  text-align: center;
}

.nam {
  text-align: left;
}

.closed td:first-child::before {
  content: "• ";
}









  
    
      Type
      Age
      Name
    
  

  
    GRANDPARENT
    80
    Ethel
  

  
    CHILD 1
    55
    Susan
  

  
    GRANDCHILD 1
    32
    Kristen
  

  
    GREAT GRANCHILD 1
    12
    Layla
  

  
    CHILD 2
    52
    Joanne
  

  
    GRANDCHILD 2
    28
    Marie

And here is the snippet before my last edition, in case the “cleaned” one doesn't fit your needs:

$('.collapse').on('click', function() {
  //console.log($(this).attr('data-depth'));
  var findChildren = function(tr) {
    var depth = tr.data('depth');
    return tr.nextUntil($('tr').filter(function() {
      return $(this).data('depth') <= depth;
    }));
  };

  var children = findChildren($(this));
  if ($(children).is(':visible')) {
    $(children).hide();
  } else {
    $(children).show();
  }

});


// HERE IS THE CODE I ADDED
$('#show_all').on('click', function() {
  $("#mytable tr.collapse:not([data-depth='0'])").show();
});
$('#hide_all').on('click', function() {
  $("#mytable tr.collapse:not([data-depth='0'])").hide();
});
$(document).ready(function() {
  $('#hide_all').trigger('click');
});

table td,
th {
  border: 1px solid #eee;
  font-family: Arial;
  font-size: 16px;
}

.level0 td:first-child {
  padding-left: 5px;
}

.level1 td:first-child {
  padding-left: 25px;
}

.level2 td:first-child {
  padding-left: 50px;
}

.level3 td:first-child {
  padding-left: 75px;
}

.collapse .toggle {
  background: url("open.gif");
  background-repeat: no-repeat;
}

.expand .toggle {
  background: url("closed.gif");
  background-repeat: no-repeat;
}

.toggle {
  height: 20px;
  width: 20px;
  display: inline-block;
}

.age {
  text-align: center;
}

.nam {
  text-align: left;
}









  
    
      Type
      Age
      Name
    
  

  
    GRANDPARENT
    80
    Ethel
  

  
    CHILD 1
    55
    Susan
  

  
    GRANDCHILD 1
    32
    Kristen
  

  
    GREAT GRANCHILD 1
    12
    Layla
  

  
    CHILD 2
    52
    Joanne
  

  
    GRANDCHILD 2
    28
    Marie

Javascript - Expand/Collapse table rows

Answers (1)

Related Questions