CODEWITHSUNDEEP
javascriptjqueryjquery-animatehtml-table
Urbycoz
Urbycoz

Reputation: 7421

Animation to hide a cell in a table and re-size the remaining cells in the row.

I've got a table with 100% width and three cells.

When I press a button, one cell is hidden, and the table layout adjusts accordingly.

I am currently using the .hide() jquery method to animate the hiding.

HTML

<table style="border-color:red;width:100%">
    <tr>
        <td>
            <table><tr><td><div>stuff 1 blah blah blah</div></td></tr></table>
        </td>
        <td>
            <table><tr><td><div>stuff 2 blah blah blah</div></td></tr></table>
        </td>
        <td id="tdStuff"> 
             <table><tr><td><div>stuff 3 blah blah blah</div></td></tr></table>           
        </td>
    </tr>
</table>
<button id="btnHide" onclick="hideStuff()" >Hide</button>

Javascript/jQuery

function hideStuff(){
    $('#tdStuff').hide('slow');
}

But the problem is that even though it adjusts smoothly at first, the text in the cell gets squashed up. And, if there is a fixed width anywhere, it stops adjusting and simply jumps.

Is there a way I can get the animation to happen smoothly by expanding the remaining cells in the row to fit the width of the table.

Relevant jsfiddle

Upvotes: 1

Views: 908

Answers (1)

Mitch Satchwell
Mitch Satchwell

Reputation: 4830

Yes, jQuery has functionality for this, try the following adjustment:

$('#tdStuff3').hide('slow');

See the documentation on hide for more information.

Upvotes: 2

Related Questions