AliSarabadani AliSarabadani - 5 months ago 16
Javascript Question

Hiding non-clicked rows using .siblings().hide()

I have the following code to collapse non-clicked rows in a Bootstrap accordion table, but instead it hides the whole row of the siblings not just the

td
.

$('tr.accordion-toggle').click(function(){
$(this).siblings().hide();
});

Answer

apparently most people have problem with applying this function on bootstrap tables as rows will show/hide twice either with hide/show or slideUp/Down, so we changed the code to this:

$('tr.table-rows').click(function(){
    if($(this).hasClass('open-row')){
      $(this).next('tr').fadeOut(600);
      $(this).removeClass('open-row');
    }
    else{
      $('.open-row').next('tr').fadeOut(600);
      $('.open-row').removeClass('open-row');
      $(this).next('tr').fadeIn(600);
      $(this).addClass('open-row');
    }
  });

now it works fine,

Comments