No effect on slideToggle() jQuery

Question

I'm using this very simple jQuery code:

            $("h3").click(function(){
                $(this).next("table").slideToggle("slow");
            });

The outcome itself actually works and the table does appear/disappear on click, but there is no effect of "slide" whatsoever - i've tried without "slow" and with "slow" - same result!?

Its almost like i'm just using .toggle()...

I cant see what could be wrong apart from the size of the table, which is only max, 12 rows.

Any ideas?

What browser are you using, I have had problems some jquery animations in ie that worked fine in opera — Andrew Jackman, Jan 24 '11 at 12:59
FF, havent even bothered in IE (yet) apparently jQuery slide has an issue with table elements :( — benhowdle89, Jan 24 '11 at 13:00

Tom · Accepted Answer · 2011-01-24T12:47:43.563

7

I don't think slideToggle works on all elements... Table could be one of them... Can you place the table inside a div and run the slideToggle on the div??

Try this...

<h3>click</h3>
<div>        
<table>
            <tr>
                <td>1</td>
            </tr>
            <tr>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
            </tr>
        </table>
</div>

and

$("h3").click(function(){
                $(this).next("div").slideToggle("slow");
            });

Working example shown here... http://jsfiddle.net/68mcY/

edited Jan 24 '11 at 12:47

answered Jan 24 '11 at 11:58

Tom

12,776
48
145
240

I was not aware that might be the case, who knew!? Will try this – benhowdle89 Jan 24 '11 at 12:03
I did try this. But when clicked, the div stuttered for a millisecond and then slid back up (it didnt actually slide down far enough to even show the table) – benhowdle89 Jan 24 '11 at 12:11
Hi Tom, thanks for the edit, however that was exactly what i did! – benhowdle89 Jan 24 '11 at 12:32
Hmm... I can't get it not to work! try the link i've just added and see if it works for you. – Tom Jan 24 '11 at 12:48

score 0 · Answer 2 · answered Jan 24 '11 at 12:01

0

This works fine.

 $("h3").click(function () {
                $("#tbl").slideToggle("slow");
            });


<h3>a</h3>
        <table id="tbl">
            <tr>
                <td>1</td>
            </tr>
            <tr>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
            </tr>
        </table>

answered Jan 24 '11 at 12:01

ashish.chotalia

3,696
27
28

The reason i put .next(), is so it would only target the table below it without having to ID all tables – benhowdle89 Jan 24 '11 at 12:03
2

Ok thanks for pointing out. From my POC I found that "Animations are not supported on table rows. " http://stackoverflow.com/questions/467336/jquery-how-to-use-slidedown-or-show-function-on-a-table-row – ashish.chotalia Jan 24 '11 at 12:13

No effect on slideToggle() jQuery

2 Answers2