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?

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/