Not valid on slideToggle () jQuery

Question

I use this very simple jQuery code:

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

The result itself actually works, and the table appears / disappears when clicked, but there is no “slide” effect at all - I tried without “slow” and “slow” - the same result !?

Its almost like I just use .toggle () ...

I can’t understand what could be wrong except for the size of the table, total max, 12 rows.

Any ideas?

Answer 1

I don't think slideToggle works on all elements ... A table can be one of them ... Can you put a table in a div and run slideToggle on a div?

Try it...

<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");
            });

A working example is shown here ... http://jsfiddle.net/68mcY/

Answer 2

.

 $("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>