JQuery - Show and Update data with in TR / TD

Question

I've created a simple table with one column containing images.

Clicking on img shows the corresponding hidden This seems to work fine.

    $("img").click(function(){
        var id = $(this).closest('tr').attr('id');
        $('#' + id + '-st').show(2000);
    });

A JFiddle is available here: http://jsfiddle.net/acmda905/

What I'm trying to do is :

Make the open slower and sort of slide down neater.

Can anyone help with this ?

Thanks

Answer 1

You can't use animations on table rows. Only show and hide is supported. You can however use a div in the table cells that's hidden and let that slide down.

 $("img").click(function(){
        var id = $(this).closest('tr').attr('id');
        $('#' + id + '-st').slideDown();
 });

I used your fiddle to show you an example with one row

http://jsfiddle.net/acmda905/1/

The row in your example will look something like this:

    <tr><td colspan='5' rowspan='1'> <div  id='row1-st' style='display:none; height:200px'>HIDDEN ROW</div></td></tr>

Answer 2

I've managed to get this to work by showing the then sliding down the .

I've also got it to work in reverse for hiding the &

Thanks to @Ruben-J for the advise.

<table border="1">
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th><th>IMG</th></tr>

<tr id='row1'><td>Row:1 Cell:1</td><td>Row:1 Cell:2</td><td>Row:1 Cell:3</td><td>Row:1 Cell:4</td><td><img src='http://www.algorismi.com/images/remove.png' /></td></tr>

    <tr id='row1-tr' hidden><td colspan='5' rowspan='1'> <div  id='row1-st' style='display:none; height:200px'>HIDDEN ROW</div></td></tr>    
</table>

<p>HIDE</p>

    $("img").click(function(){
        var id = $(this).closest('tr').attr('id');
        $('#' + id + '-tr').show("slow");
        $('#' + id + '-st').slideDown();
    });

    $("p").click(function(){
         $('#row1-st').text('').slideUp();
         $('#row1-tr').hide("slow");
    });

Working FIDDLE