jQuery Slideout Panel

jQuery Slideout Panel

Hi,

I am working on a method of sliding out a div. This is my html code.


<ul id="exams" class="grid_12">
   <li>
   <table summary="My Exams">
      <td class="options">
         <ul>
            <li><a href="#" class="moreInfo" title="Click for more information">More Info</a></li>
         </ul>
      </td>
   </table>
      <div class="morePanel">
         // code in here...
      </div>
   </li>
</ul>


So from there you can see I have my container, the ul#exams, I have my link a.moreInfo and I have my slideout panel div.morePanel.

Here is my jQuery.

<script type="text/javascript">
   $(document).ready(function() {
      $('ul#exams li > div.morePanel').hide();
      $('ul#exams li > a.moreInfo').click(function() {
         $('ul#exams li > div.morePanel').slideToggle('fast');
         });
      });
</script>


Basically, I need help sliding out only the panel within the li element that has the link and panel. At the moment they all slide out.

Help is much appreciated.

Thanks

Nick