slideToggle() on causes "jump"

Question

When using jQuery slideToggle() function to show/hide data on a new row in a table it causes it to stutter. Yet, when using slideToggle() to show/hide a <div> it works very smoothly.

Can anyone tell me why this happens?

Fiddle example: http://jsfiddle.net/gLGUG/

jQuery code:

$("tr").click(function () {
    $(".slideMe").slideToggle();
});

$(".slideMeDiv, button").click(function () {
    $(".slideMeDiv").slideToggle();
});

HTML Markup:

<table>
    <tr>
        <td>One Row</td>
    </tr>
    <tr>
        <td>Click me</td>
    </tr>
    <tr class="slideMe">
        <td>SlideDOWN</td>
    </tr>
</table>
<br />
<button>Slide Div</button>

<div class="slideMeDiv">
    Slide me as well
</div>

Yes, I know it works... but if you look at my fiddle example, it causes a "stutter". — 97ldave, Jun 14 '13 at 10:03
http://stackoverflow.com/questions/467336/jquery-how-to-use-slidedown-or-show-function-on-a-table-row — Brendan Bullen, Jun 14 '13 at 10:04
I mean that shutter. `slideToggle` doesn't support `tr` for some reason. you either have to slide it's contents or wrap it in a div. — Spokey, Jun 14 '13 at 10:04
@97ldave check this out: http://stackoverflow.com/questions/5126704/slidetoggle-in-table-row — Henrik Andersson, Jun 14 '13 at 10:31

Roy Sonasish · Accepted Answer · 2013-06-14T10:40:45.063

6

Mention the border="0" cellspacing="0" cellpadding="0" in the table

<table width="100%" border="0" cellspacing="0" cellpadding="0">

this will solve the jumping issue

Here is the jsFiddle File

Also for sliding effect you need to wrap your text with a div and place the div in-side the td

here is the updated jsFiddle File

edited Jun 14 '13 at 10:40

answered Jun 14 '13 at 10:17

Roy Sonasish

4,571
20
31

its not jumping in chrome as well as – Roy Sonasish Jun 14 '13 at 10:20
Although the stutter has stopped, there isn't a slide there anymore. – 97ldave Jun 14 '13 at 10:22
1

for slide you need to wrap your text with a div and place the div in side the td. – Roy Sonasish Jun 14 '13 at 10:28

score 1 · Answer 2 · answered Jun 09 '16 at 10:48

1

I just do this in my js

$(document).ready(function(){
    $('tr').click(function(){
        $('.slideMe').slideToggle();
        $('.slideMe').css("display", "block")
    });
});

This stops the tr tag displaying as table-row which doesn't work with a slide toggle

answered Jun 09 '16 at 10:48

BritishSam

1,070
8
24

Hmm, when I tried this I got nice sliding, but all my table cells squished over to the left. – Michael12345 Aug 02 '16 at 23:39
@Michael12345 might have to give them fixed widths, maybe the cells themselves or just the table headers. Or not tried this but display as inline-block might work and you shouldn't have to change widths then. – BritishSam Aug 03 '16 at 10:32

score 0 · Answer 3 · answered Sep 27 '13 at 18:13

The slide toggle seems to work fine on a table row without any data inside its td's so if you slideToggle the content inside the td's then it should work.

try this:

function slideToggleRow(selector){
    $(selector).find("td").contents().slideToggle();
    $(selector).slideToggle();
}

used like this:

$("tr").click(function () {
    slideToggleRow(".slideMe");
});

This should work, maybe not perfectly, but it's the best solution I have so far. If anyone finds a better solution please let me know.

score 0 · Answer 4 · answered Feb 27 '15 at 22:34

For the restructured table:

   <table>
     <tr>
         <td>One Row</td>
     </tr>
     <tr>
         <td>Click me</td>
     </tr>
     <tr class="slideMe">
         <td>
             <div class="tdDiv">SlideDOWN</div>
         </td>
     </tr>
   </table>

(1) Make sure you show both the "slideMe" tr and the "div" inside of the "slideMe" tr's td like this:

$('.slideMe').show();
$('.slideMe').find('.tdDiv').show();

(2) Use this code to toggle your slideMe row

 function toggleRow(selector){
   if($(selector).css('display') == "none"){
      $(selector).find('.tdDiv').slideDown(200);
      $(selector).slideDown(200);
   }
   else{
      $(selector).slideUp(200);
      $(selector).find('.tdDiv').slideUp(200);
   }
}

***Make sure the div inside the tr's td slides down BEFORE your tr slides down.

***Also, make sure the tr slides up BEFORE the div inside the tr's td slides up.

(3) Finally, you can call the toggleRow function:

 toggleRow($('.slideMe'));

slideToggle() on causes "jump"

4 Answers4

Linked