[jQuery] Accordion Menu

[Nelly]

Hi!
I'm trying to implement an accordion menu but I'm only getting the
first sub menu to show up when I click on its header menu. This is the
code I have for the function.

$(document).ready(function()
{

        $("div.menu_body").hide();
        $("p.menu_head").click(function()
    {
         $(this).next("div.menu_body").slideToggle(300);
        return false;
        });
});

And my menu is created as the following. I'm getting my sub menus(sub
categories) from the database depending on the menu (category).

 <td><table width="100%"  border="0" cellspacing="0" cellpadding="2">
  <tr>
  <td colspan="2" height="1"><img src="images/spacer.gif" width="1"
height="1"></td>
  </tr>
   <tr>
   <?php
$catName = "COULDN'T BE THIS SENTINAL";
$ct=0;
$sql_cat = "SELECT s.cat_id, s.id, c.cat_name, s.sub_cat_name
FROM category c LEFT JOIN subcategory s ON find_in_set( c.id,
s.cat_id )
WHERE c.enabled = 1 AND s.enabled = 1 ORDER BY c.cat_name;";
$res_cat = mysql_query($sql_cat)or die('<br>'.
$sql_cat.'<br>'.mysql_error());
                                                                
if(mysql_num_rows($res_cat)>0)
{
while($row_cat = mysql_fetch_array($res_cat)){
?>

<td width="96%" class="sale-lnding-left-menu-txt">

 <div id="firstpane" class="menu_list">
<p class="menu_head">
<a href ="/"
   <?php
if ( $row_cat[ 'cat_name' ] != $catName )
{
$catName = $row_cat[ 'cat_name' ];
echo "<br><strong><font color='#b4120a'>$catName</font></strong><br>";
}
?>
</a>
</p>

<div class="menu_body">
<a class="sale-lnding-left-menu-txt"
href="sale-search-landing.php
?cid=<?php echo $row_cat['cat_id']; ?>
&sid=<?php echo $row_cat['id']; ?>
                                                                                
        &sub_cat_name=<?php echo urlencode($row_cat
['sub_cat_name']); ?>" >
<?php echo "" . $row_cat['sub_cat_name']; ?>
</a>
</div>
</div>
</td>

Any idea how I can make this work? Any help would be appreciated!

Thanks

Nelly