.slideToggle on a table row

.slideToggle on a table row

Hi !

I'm a beginner with JQuery (and Ajax) and I have a little question with the slideToggle effect.

I would like to develop a HTML table with some data and, when you click on a row, a row appears below the first and shows some details for the first row.

I tried to do this :

  1. <button>Toggle</button>

  3. <table border="1">
        <tr><td>1</td></tr>
        <tr id="toggled1" style="display:none;"><td>2</td></tr>
        <tr><td>3</td></tr>
        <tr id="toggled2" style="display:none;"><td>4</td></tr>
      </table>





  4. <script>
        $("button").click(function () {
          $("#toggled1").slideToggle("slow");
        });
    </script>





But the slideToggle seems not working. The effect is not fluid.

I have to use a table for this developement, so I'm wondering if anyone has a solution.

Sorry if the question has been already posted here but, I can't find some answers by browsing the web so ...

Thanks a lot !

PS : If my question is not clear at all, please say it :D Thanks !