0

I'm working on expand/collapse row functionality using jquery. It seems that it can find the table row I'm looking for and hides it by default. But then I'm trying to add expand/collapse functionality and looks like I can't access the right tag.

I got the jquery code from one of the other examples on the website. It's my first time working with it so I struggled with understanding other answers on the same topic.

I also think it was a bad idea to put the parent row and the one that is supposed to show/hide on the same level so any recommendation on that would be nice.

$(function() {
  $(".table-container__table").find(".expandable").hide();
  $(".table-container__table").click(function(event) {
    event.stopPropagation();
    var $target = $(event.target);
    if ($target.closest("td").attr("colspan") == 6) {
      $target.slideUp();
    } else {
      $target.closest("tr").next().find(".details-table__details-row").slideToggle();
    }
  });
});

Here is the jsfiddle with the full example: https://jsfiddle.net/in43sh/whs0e3fr/16/

in43sh
  • 711
  • 1
  • 10
  • 24
  • Random thing - I think `next.find()` should be `next().find()` as next is a function. – takendarkk Apr 18 '19 at 23:47
  • @takendarkk I changed it, still doesn't work. But thank you – in43sh Apr 18 '19 at 23:50
  • After a quick glance, looks like you're hiding the parent element, then trying to show a row in a child table of the hidden row - but the parent is still hidden. If you fix the `.next()` thing, then remove that first line `...hide()`, it will allow you to toggle the row as expected - however, `slideToggle` doesn't often work as expected on table rows or cells: https://stackoverflow.com/questions/5126704/slidetoggle-in-table-row –  Apr 19 '19 at 00:01
  • @mark.hch I fixed .next() in the question and removed the first line with `...hide()` as you suggested. And it worked! Though I want it to be hidden by default. Should I change my HTML structure for that? Like, put the row that has to be expanded in the parent somehow? – in43sh Apr 19 '19 at 00:09
  • 1
    You can hide the table at first, you just have to `slideToggle` the same table that you hid, instead of a grandchild row of the hidden table. Make sense? It did to me writing it, not so sure reading it though. –  Apr 19 '19 at 00:13
  • @mark.hch well that's the problem for me. That I don't know how to access it. If I just put $target.find(".expandable") everywhere it's starts doing weird things – in43sh Apr 19 '19 at 05:19
  • 1
    Take a look at this one: https://jsfiddle.net/gtqh95cu/. If the click is within an `.expandable` row, it will `slideToggle` that row - otherwise, it sees if the next row is an `.expandable` row, and `slideToggle`s it. –  Apr 19 '19 at 15:57
  • @mark.hch thank you! If you want you can post it as an answer. – in43sh Apr 19 '19 at 16:19

1 Answers1

1

Per our comment discussion - the main issue (aside from .next to .next()) was that the parent row was hidden first, then a child row was shown - but the parent was still invisible. To resolve, just toggle the same thing that's hidden. Here's the applicable JS with comments:

//hide any ".expandable" rows
$(".table-container__table").find(".expandable").hide();

//whenever the table is clicked, check if the target was 
//within an ".expandable" row if it was, then slideToggle 
//that row, otherwise, if the next row is ".expandable", 
//slideToggle it instead
$(".table-container__table").click(function(event) {
  event.stopPropagation();
  var $target = $(event.target);
  if($target.closest('.expandable').length == 1) {
    $target.closest('.expandable').slideToggle();
  }
  else {
    if($target.closest('tr').next().hasClass('expandable')) {
      $target.closest('tr').next().slideToggle();
    }
  }
});
  • It works, yes. But for some reason, animation doesn't work. It just collapses/expands, but there is no "sliding" animation. Do you know why? – in43sh Apr 19 '19 at 16:35
  • Yea, my first comment on the question links to an SO post that explains the behavior. If you put everything in `div`s and toggled those, it would animate. `tr` and `td` don't always slide as expected. Here's the answer with the child table wrapped in a `div` for nicer animation: https://jsfiddle.net/u85ox2e4/ –  Apr 19 '19 at 16:48
  • It's interesting because I didn't find any documentation on this issue. In fact, most of the examples with tr/td are working fine: http://jsfiddle.net/mfwYS/ – in43sh Apr 19 '19 at 18:58
  • 1
    The one you linked to just now is toggling the `

    ` element in each cell, not the cells or rows themselves. I don't see any official documentation from jQuery on it; that SO post I linked to is the best source I've found. It does illustrate that you `can` do it just to the `

    ` it just doesn't always work as intended (if you check the jsFiddle link from the accepted answer in that post, you can see it work on a ``, but you'll notice it pause for a second when it reaches the row's minimum height before the row disappears).     –  Apr 19 '19 at 19:08
  • Got it. Thank you – in43sh Apr 19 '19 at 20:57