How to Use slideDown (or show) function on a table

Question

I'm trying to add a row to a table and have that row slide into view, however the slidedown function seems to be adding a display:block style to the table row which messes up the layout.

Any ideas how to work around this?

Here's the code:

$.get('/some_url', 
  { 'val1': id },

  function (data) {
    var row = $('#detailed_edit_row');
    row.hide();
    row.html(data);
    row.slideDown(1000);
  }
);

Answer 1

The plug offered by Vinny is really close, but I found and fixed a couple of small issues.

1. It greedily targeted td elements beyond just the children of the row being hidden. This would have been kind of ok if it had then sought out those children when showing the row. While it got close, they all ended up with "display: none" on them, rendering them hidden.
2. It didn't target child th elements at all.

3. For table cells with lots of content (like a nested table with lots of rows), calling slideRow('up'), regardless of the slideSpeed value provided, it'd collapse the view of the row as soon as the padding animation was done. I fixed it so the padding animation doesn't trigger until the slideUp() method on the wrapping is done.

   (function($){
       var sR = {
           defaults: {
               slideSpeed: 400
             , easing: false
             , callback: false
           }
         , thisCallArgs:{
               slideSpeed: 400
             , easing: false
             , callback: false
           }
         , methods:{
               up: function(arg1, arg2, arg3){
                   if(typeof arg1 == 'object'){
                       for(p in arg1){
                           sR.thisCallArgs.eval(p) = arg1[p];
                       }
                   }else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')){
                       sR.thisCallArgs.slideSpeed = arg1;
                   }else{
                       sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
                   }
   
                   if(typeof arg2 == 'string'){
                       sR.thisCallArgs.easing = arg2;
                   }else if(typeof arg2 == 'function'){
                       sR.thisCallArgs.callback = arg2;
                   }else if(typeof arg2 == 'undefined'){
                       sR.thisCallArgs.easing = sR.defaults.easing;    
                   }
                   if(typeof arg3 == 'function'){
                       sR.thisCallArgs.callback = arg3;
                   }else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
                       sR.thisCallArgs.callback = sR.defaults.callback;    
                   }
                   var $cells = $(this).children('td, th');
                   $cells.wrapInner('<div class="slideRowUp" />');
                   var currentPadding = $cells.css('padding');
                   $cellContentWrappers = $(this).find('.slideRowUp');
                   $cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function(){
                       $(this).parent().animate({ paddingTop: '0px', paddingBottom: '0px' }, {
                           complete: function(){
                               $(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents());
                               $(this).parent().css({ 'display': 'none' });
                               $(this).css({ 'padding': currentPadding });
                           }
                       });
                   });
                   var wait = setInterval(function(){
                       if($cellContentWrappers.is(':animated') === false){
                           clearInterval(wait);
                           if(typeof sR.thisCallArgs.callback == 'function'){
                               sR.thisCallArgs.callback.call(this);
                           }
                       }
                   }, 100);                                                                                                    
                   return $(this);
               }
             , down: function (arg1, arg2, arg3){
                   if(typeof arg1 == 'object'){
                       for(p in arg1){
                           sR.thisCallArgs.eval(p) = arg1[p];
                       }
                   }else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')){
                       sR.thisCallArgs.slideSpeed = arg1;
                   }else{
                       sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
                   }
   
                   if(typeof arg2 == 'string'){
                       sR.thisCallArgs.easing = arg2;
                   }else if(typeof arg2 == 'function'){
                       sR.thisCallArgs.callback = arg2;
                   }else if(typeof arg2 == 'undefined'){
                       sR.thisCallArgs.easing = sR.defaults.easing;    
                   }
                   if(typeof arg3 == 'function'){
                       sR.thisCallArgs.callback = arg3;
                   }else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
                       sR.thisCallArgs.callback = sR.defaults.callback;    
                   }
                   var $cells = $(this).children('td, th');
                   $cells.wrapInner('<div class="slideRowDown" style="display:none;" />');
                   $cellContentWrappers = $cells.find('.slideRowDown');
                   $(this).show();
                   $cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function() { $(this).replaceWith( $(this).contents()); });
   
                   var wait = setInterval(function(){
                       if($cellContentWrappers.is(':animated') === false){
                           clearInterval(wait);
                           if(typeof sR.thisCallArgs.callback == 'function'){
                               sR.thisCallArgs.callback.call(this);
                           }
                       }
                   }, 100);
                   return $(this);
               }
           }
       };
   
       $.fn.slideRow = function(method, arg1, arg2, arg3){
           if(typeof method != 'undefined'){
               if(sR.methods[method]){
                   return sR.methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
               }
           }
       };
   })(jQuery);
   

Answer 2

This code works!

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <title></title>
        <script>
            function addRow() {
                $('.displaynone').show();
                $('.displaynone td')
                .wrapInner('<div class="innerDiv" style="height:0" />');
                $('div').animate({"height":"20px"});
            }
        </script>
        <style>
            .mycolumn{border: 1px solid black;}
            .displaynone{display: none;}
        </style>
    </head>
    <body>
        <table align="center" width="50%">
            <tr>
                <td class="mycolumn">Row 1</td>
            </tr>
            <tr>
                <td class="mycolumn">Row 2</td>
            </tr>
            <tr class="displaynone">
                <td class="mycolumn">Row 3</td>
            </tr>
            <tr>
                <td class="mycolumn">Row 4</td>
            </tr>
        </table>
        <br>
        <button onclick="addRow();">add</button>    
    </body>
</html>

Answer 3

I'm a bit behind the times on answering this, but I found a way to do it :)

function eventinfo(id) {
    tr = document.getElementById("ei"+id);
    div = document.getElementById("d"+id);
    if (tr.style.display == "none") {
        tr.style.display="table-row";
        $(div).slideDown('fast');
    } else {
        $(div).slideUp('fast');
        setTimeout(function(){tr.style.display="none";}, 200);
    }
}

I just put a div element inside the table data tags. when it is set visible, as the div expands, the whole row comes down. then tell it to fade back up (then timeout so you see the effect) before hiding the table row again :)

Hope this helps someone!

Answer 4

function hideTr(tr) {
  tr.find('td').wrapInner('<div style="display: block;" />').parent().find('td > div').slideUp(50, function () {
    tr.hide();
    var $set = jQuery(this);
    $set.replaceWith($set.contents());
  });
}

function showTr(tr) {
  tr.show()
  tr.find('td').wrapInner('<div style="display: none;" />').parent().find('td > div').slideDown(50, function() {
    var $set = jQuery(this);
    $set.replaceWith($set.contents());
  });
}

you can use these methods like:

jQuery("[data-toggle-tr-trigger]").click(function() {
  var $tr = jQuery(this).parents(trClass).nextUntil(trClass);
  if($tr.is(':hidden')) {
    showTr($tr);
  } else {
    hideTr($tr);
  }
});

Answer 5

I can be done if you set the td's in the row to display none at the same time you start animating the height on the row

tbody tr{
    min-height: 50px;
}
tbody tr.ng-hide td{
    display: none;
}
tr.hide-line{
    -moz-transition: .4s linear all;
    -o-transition: .4s linear all;
    -webkit-transition: .4s linear all;
    transition: .4s linear all;
    height: 50px;
    overflow: hidden;

    &.ng-hide { //angularJs specific
        height: 0;
        min-height: 0;
    }
}

Answer 6

I had problems with all the other solutions offered but ended up doing this simple thing that is smooth as butter.

Set up your HTML like so:

<tr id=row1 style='height:0px'><td>
  <div id=div1 style='display:none'>
    Hidden row content goes here
  </div>
</td></tr>

Then set up your javascript like so:

function toggleRow(rowid){
  var row = document.getElementById("row" + rowid)

  if(row.style.height == "0px"){
      $('#div' + rowid).slideDown('fast');
      row.style.height = "1px";   
  }else{
      $('#div' + rowid).slideUp('fast');
      row.style.height = "0px";   
  } 
}

Basically, make the "invisible" row 0px high, with a div inside.
Use the animation on the div (not the row) and then set the row height to 1px.

To hide the row again, use the opposite animation on the div and set the row height back to 0px.