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?

Outmost

Can you post a jsFiddle of the testcase? – Plagiarize

What browser are you using, I have had problems some jquery animations in ie that worked fine in opera – Annamarieannamese

FF, havent even bothered in IE (yet) apparently jQuery slide has an issue with table elements :( – Outmost

Answer 1

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/

Loquat

I was not aware that might be the case, who knew!? Will try this – Outmost

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) – Outmost

Hi Tom, thanks for the edit, however that was exactly what i did! – Outmost

Hmm... I can't get it not to work! try the link i've just added and see if it works for you. – Loquat

Answer 2

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>

Venose

The reason i put .next(), is so it would only target the table below it without having to ID all tables – Outmost

Ok thanks for pointing out. From my POC I found that "Animations are not supported on table rows. " #467836 – Venose