jQuery table row expand/collapse

javascript jquery css collapsable
calebo picture calebo · May 25, 2011 · Viewed 14.1k times · Source

I've got a table and it has rows that are collapsible when clicked on the table heading.

Problem is it doesn't seem to be very smooth, there's a lag and jump once I click on the header and when the content shows. Does anyone know how to fix this?

See example build »

Answer

VinayC picture VinayC · May 25, 2011

Unfortunately, table rows does not animate (with jquery) - see this related question on SO: How to Use slideDown (or show) function on a table row?

Work-around will be to use div based layout or try out wrapping td content into divs and animating those divs - see this fiddle. Of course, you have to adjust the css.

Related questions

jquery.fullPage.js how to enable scroll within a div without affecting the sections scroll

Right, this is not easy to explain... I'm using jquery.fullPage.js for a website. I have a few collapsable panel hosting a big amount of copy which requires scroll. My problem begins when I enable the scroll on this …

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
How can I remove a style added with .css() function?

I'm changing CSS with jQuery and I wish to remove the styling I'm adding based on the input value: if(color != '000000') $("body").css("background-color", color); else // remove style ? How can I do this? Note that the line above …

Read More