Question

I’m using a HTML Table with several rows. Every second row – containing details about the preceding row – is hidden using CSS.

When clicking the first row, the second row gets showed using jQuery show(). This is quite nice, but I would prefer the slideDown-Effect.

The problem is, inside the details row, there are two floating DIVs, one floating on the left, and one on the right. Now if i slideDown the previously hidden row, the contained DIVs behave strange and “jump around”. See this animated gif to understand what I mean: http://ich-wars-nicht.ch/tmp/lunapic_127365879362365_.gif

The markup:

<tr class="row-vm">
    <td>...</td>
    ...
</tr>
<tr class="row-details">
    <td colspan="8">
        <div class="vmdetail-left">
        ...
        </div>
        <div class="vmdetail-right">
        ...
        </div>
    </td>
</tr>

The CSS:

.table-vmlist tr.row-details { display: none; }
div.vmdetail-left { float: left; width: 50%; }
div.vmdetail-right { float: right; width: 50%; }

And the jQuery code:

if ($(this).next().css('display') == 'none')
{
    // Show details
    //$(this).next().show();
    $(this).next().slideDown();
}
else
{
    // Hide details
    //$(this).next().hide();
    $(this).next().slideUp();
}

Is there a way to fix this behavior, and to implement a nice slideDown-effect?

Answer 1

Summary: show/hide the tr, animate the divs within with slideUp/slideDown

The markup: The same

The CSS:

.table-vmlist tr.row-vm { cursor:pointer; }
.table-vmlist tr.row-details { display: none; }
div.vmdetail-left { float: left; width: 50%; display:none; }
div.vmdetail-right { float: right; width: 50%; display:none; }

(divs start off hidden. Also added pointer cursor to clickable tr for usability)

And the jQuery:

$('tr.row-vm').bind('click',function(e){
    if ($(this).next().css('display') == 'none')
    {
        // Show tr, slideDown inner divs
        $(this).next().show().find('div').slideDown('slow');
    }
    else
    {
        // slideUp inner divs, hide parent tr after animation complete
        $(this).next().find('div').slideUp('slow',function(){
            $(this).parent().parent().hide();
        });
    }
});

(Note that direct parent of divs is the td, so parent called twice to access tr. Also added slide speed.)