jQuery toggle 'animation' in html table

Question

Is it possible to slide up/down 'in animated manner' either full table row or all cells within it, similar as it happens while using div? Since as I checked, its just displaying/hiding but without any animation.

HTML:

<table>
<tbody>
    <tr id="target">
        <td>User</td>
        <td>will</td>
        <td>click</td>
        <td>me</td>
    </tr>
    <tr id="subject">
       <td>And</td>
        <td>I</td>
        <td>should</td>
        <td>expand</td>
    </tr>
</tbody>

CSS:

* { margin: 0; padding: 0; }

table { margin: 0 auto; }
table tr { background: #d4d4d4; }
table tr > td { width: 80px; }

jQuery:

<script src="jquery.js"></script>
   <script>$(document).ready(function(){
   $('#subject').hide();
   $('#target').click(function() {
    $('#subject').slideToggle();
   });
});
</script>

@janakshah - just add the contents u got it all there: http://jsfiddle.net/n9GQF/2/ — urbz, Apr 15 '14 at 07:15

score 2 · Answer 1 · answered Apr 15 '14 at 07:16

2

A table is self controling its height. you can change the tr to

display: block;

or you can wrap the inner with a div.

here is some test with display:block on tr: http://jsfiddle.net/G7BaJ/

answered Apr 15 '14 at 07:16

Manuel Richarz

1,916
13
27

with 'wrap the inner with a div' means, if I have data in 5 cells then I must have 5 divs and should call each in script to get them animate? Also turning 'display: block' has any side-affect, what changes it will add to tr element if compared to normal tr without this. – ravk Apr 15 '14 at 07:33
display: block; will have side effects. but i don't know what specific side effects. with display: block; you are changing the tr to a normal div's behaviour. with wrapping, yes, you have to generate 5 divs but this will not cause side effects of your table. but you don't have to call each of this divs to animate. think using jQuery ('tr > div') ;) – Manuel Richarz Apr 15 '14 at 07:36

score 1 · Answer 2 · answered Apr 15 '14 at 07:15

1

Animation does not work or work as not expected for table elements. Better use animation for div's inside td, then you will get nice animation. Direct animation for table td will just instantly hide, show it.

answered Apr 15 '14 at 07:15

Justinas

41,402
5
66
96

score 0 · Answer 3 · answered Apr 15 '14 at 07:23

Table rows present particular obstacles to animation, since browsers use different values (table-row and block) for their visible display property. The .hide() and .show() methods, without animation, are always safe to use with table rows. As of jQuery version 1.1.3, .fadeIn() and .fadeOut() can be used as well.

http://api.jquery.com/slideToggle/

https://api.jquery.com/slideDown/

https://api.jquery.com/slideUp/

jQuery toggle 'animation' in html table

3 Answers3