slidetoggle not working smoothly for row

Question

HTML:

<table>
 <tr class="tab">

    <td>
        1
    </td>
    <td>
        2
    </td>
    <td>
        3
    </td>
</tr>
<tr style="display:none">
    <td colspan="3">hidden</td>
</tr>
<tr class="tab">
<td>first</td>
<td>second</td>
<td>third</td>
</tr>
</table>

JS:

$(".tab").click(function() {
    $(this).next().slideToggle();
});

CSS:

.tab
{
    background: grey;
    padding: 5px;
    color: white;    

}

But the animation isn't smooth? What I am doing wrong? Pleae check the link and update it for me link http://jsfiddle.net/67rHW/9/?

Thanks for your time.

score 2 · Answer 1 · edited May 23 '17 at 12:23

Tables don't behave well in jQuery animation. Try wrapping the contents you want to show/hide in a block element such as a div and then toggle that. Also, remove cellpadding and cellspacing, then use CSS to add padding as needed.

http://jsfiddle.net/67rHW/11/

HTML

<table cellpadding="0" cellspacing="0" border="0">
    <tr class="tab">
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr class="nopadding">
        <td colspan="3"><div style="display:none">hidden</div></td>
    </tr>
    <tr class="tab">
        <td>first</td>
        <td>second</td>
        <td>third</td>
    </tr>
</table>

CSS:

td {
    padding: 5px;
}
tr.nopadding td {
    padding: 0;
}
tr.nopadding td > div {
    padding: 5px;
}
.tab {
    background: grey;
    padding: 5px;
    color: white;
}

JavaScript:

$('.tab').click(function() {
    $(this).next().find('div').slideToggle();
});

For more information, see:

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

yes it helped for me and if i want row spacing and remove the cell spacing inside a row. — Prasenjit, Mar 09 '14 at 16:42

score 1 · Answer 2 · answered Mar 09 '14 at 16:36

I would never use jQuery to do a slideToggle. Well, the most crucial part is - it suffers from JS. Use CSS3 transitions, to enable GPU acceleration.

Look at this for CSS3 slideToggle (no Script -moz-transition)

or this, for -webkit-transition (if you're wanna have smooth transitions on a hybrid app like with phonegap)

JohanVdR · Answer 3 · 2014-03-09T18:50:09.543

I suggest to not add the row with inline style to display: none. But add a class to any next row you want to be set as hidden. It makes the content in the table not accessible if JS is disabled. Inserted the div in the table cell for smooth sliding.

$('.hidden-row')
.children('td')
.css('padding', 0)
.wrapInner('<div />');
$('.hidden-row div').hide();

$(".tab").click(function() {
  $(this)
  .next()
  .find('td')
  .css('padding', '');
  $(this)
  .next()
  .find('div')
  .slideToggle(function() {
      if($(this).is(':hidden')) {
        $(this).parent('td').css('padding',0);
      }
  });
});

<tr class="hidden-row">
  <td colspan="3">hidden</td>
</tr>


table {
    border-collapse: collapse;
}
tr {
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #fff;
}
td {
    background: grey;
    color: white;
    padding: 5px; 
    text-align: center;
}

http://jsfiddle.net/puKY7/61/

score 0 · Answer 4 · answered Oct 09 '14 at 01:36

You can make DIVs behave like table but sadly you'll have the same issues. What I discovered - when you trying to hide row - it looks terrible, when you trying to hide images from row - it looks better; close, but no cigar. And only if you will create a DIV wrapper for each image it will look good.

have a look here: http://jsfiddle.net/67rHW/35/

html

<button id='b1'>1</button>
<button id='b2'>2</button>
<button id='b3'>3</button>


<div id='table1_style'class='ui_table'>
    <div id='row0_style' class='ui_row'>
        <div class='ui_cell_wrapper '>
            <img class='i'>
        </div>
        <div class='ui_cell_wrapper '>
            <img class='i'>
        </div>
    </div>

    <div id='row1_style' class='ui_row'>

        <div class='ui_cell_wrapper'>
            <div class='w2'>
            <img id='' class='i img2' >
            </div>
        </div>
        <div class='ui_cell_wrapper w2'>
            <div class='w2'>
            <img id='' class='i img2'>
            </div>        
        </div>

    </div>                    

    <div id='row2_style' class='ui_row'>
        <div class='ui_cell_wrapper '>
            <img id='' class='i' src="">
        </div>
        <div class='ui_cell_wrapper '>
            <img id='' class='i'>
        </div>
    </div>           
</div>

CSS

.ui_table{
    width:100%; 
    display: table; 
}

.ui_row{
    width:100%; 
    display: table-row;
    border-spacing: 0px;
}

.ui_cell_wrapper{
    border:solid black 1px;
    position:relative;
    display: table-cell;
    width: 16%;
    vertical-align: middle;
    text-align: center;
}

Javascript

$('.i').attr('src', "http://qrcode.kaywa.com/img.php");

$('#b1').click(function(){
    $('.img2').add($('.w2')).show(); 
    $('#row1_style').toggle(1000);
});

$('#b2').click(function(){
    $('#row1_style').add($('.w2')).show();    
    $('.img2').toggle(1000);
});

$('#b3').click(function(){
    $('#row1_style').add($('.img2')).show();  
    $('.w2').slideToggle(1000);
});

slidetoggle not working smoothly for row

4 Answers4