CODEWITHSUNDEEP
javascriptjqueryhtml-table
XT_Nova
XT_Nova

Reputation: 1170

Why does jQuery slideToggle() function acts strangely for me in my table?

I'm making a prototype in HTML and I want to make a table, which will display more table rows when a user clicks on a button. I want to use the slideToggle function or something smooth.

It works, showing the content, but there is some lag or something strange going on. I have applied somewhat the same function on other objects (not in tables) and there it have worked out nicely.

This is my script: 

$(document).ready(function() {
  $('#show-more-rows').click(function() {
    $('#tr-button').slideToggle();
    $('.hidden-row').slideToggle();
  });
  $('#show-less-rows').click(function() {
    $('#tr-button').slideToggle();
    $('.hidden-row').slideToggle();
  });
);

Here is a jsFiddle for my table.

Any help and tips will be appreciated!

Upvotes: 1

Views: 228

Answers (2)

Alex
Alex

Reputation: 7833

jQuery's slide animation doesn't support table rows. Just split up the table in two tables (the one visible and the one that will be expanded) and wrap the second one in a div. Now you can slideToggle() this div.

Here's your fix: http://jsfiddle.net/5SYBe/12/

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196296

The problem is that you are using it on tr elements, which cannot be re-sized to less than their contents.. (that is the way tables work)

So the animation tries to animate their height from 0 to full but it fails so you see them at full size from the start.

The same goes on with the hiding. While the animation lasts (which does nothing visually) you see it and at the end where the elements gets hidden you get the final state..

Upvotes: 1

Related Questions