jquery toggleSlide() не скользящий

Question

У меня есть тумблер, который в основном он просто скрывает и показывает, он не скользит вверх и вниз, как должен.

<script type="text/javascript"> 
    $(document).ready(function(event){ 
     $('.togglable tr:not(:first-child)').hide(); 

     $('a.toggleSwitch').click(function (event) { 
      event.preventDefault(); 
      $(this).parent().parent().siblings('tr').slideToggle("fast"); 
     }); 
    }); 
</script> 

и HTML ...

<table class="togglable"> 
    <tr><td><a class="toggleSwitch" href="#">Click me</a></td></tr> 
    <tr><th>Part No</th><th>Description</th></tr> 
    <tr><td>12345</td><td>Description1</td></tr> 
    <tr><td>12344</td><td>Description2</td></tr> 
    <tr><td>12343</td><td>Description3</td></tr> 
    <tr><td>12342</td><td>Description4</td></tr> 
</table> 

только схватившись с JQuery, так что любая помощь приветствуется!

Answer 1

Попробуйте (fiddle)

<a class="toggleSwitch" href="#">Click me</a> 
    <div class="togglable"> 
     <table> 
      <tr> 
       <th> 
        Part No 
       </th> 
       <th> 
        Description 
       </th> 
      </tr> 
      <tr> 
       <td> 
        12345 
       </td> 
       <td> 
        Description1 
       </td> 
      </tr> 
      <tr> 
       <td> 
        12344 
       </td> 
       <td> 
        Description2 
       </td> 
      </tr> 
      <tr> 
       <td> 
        12343 
       </td> 
       <td> 
        Description3 
       </td> 
      </tr> 
      <tr> 
       <td> 
        12342 
       </td> 
       <td> 
        Description4 
       </td> 
      </tr> 
     </table> 
    </div> 
    <script> 
     $(document).ready(function (event) { 
      $('.togglable').hide(); 

      $('a.toggleSwitch').click(function (event) { 
       event.preventDefault(); 
       $('.togglable').slideToggle("slow"); 
      }); 
     }); 
    </script> 

фактически разметку, которую вы пытаетесь скользят не имеет достаточно места по вертикали, чтобы выглядеть лучше, когда она скользит.