Question

I have a table. The row is given specific height and overflow is set to hidden. On click, the row will expand down showing hidden contents. I have done this using toggle method. The styling is altered to show contents. This works perfect. But I want to add some sliding animation effect to this. The expansion of row happens immediately after I click it. Instead, I want this to happen in a smooth animated format, like in some jQuery menus. Also I want to hide one open row if another row expands.

You can see a working fiddle Here

Answer 1

Just a way how to do that:
– Set the height of 40px via jQuery, but before doing that, calculate the height of the
‘opened’ element.
-Than just animate on click.

DEMO

var cl4h = $('.class4').height(); // get the height of the opened .class4

$('.class4').css({ height:'40px' }); // set height to 40px;

$('.class4').toggle(function() {
    $(this).animate({ height: cl4h });
}, function() {
    $(this).animate({ height: '40px' });
});

P.S.
Remove height: 40px; for the el .class4 from your CSS

---

If you have to use more than one class here is a demo using tha jQuery .data() :

DEMO with .data()

$('.class4').each(function(e) {
    var cl4h = $(this).height();    // get height of each element
    $(this).data('height', cl4h);   // and store it into .data (for each el)
});

$('.class4').css({height: '40px'}); // set heights to 40px on page load

$('.class4').toggle(function() {   
   $(this).animate({height: $(this).data('height') }); // call the el .data where is stored the el height
}, function() {
   $(this).animate({height: '40px'});
});