Show hide a table (Traversing DOM on a condition)

Show hide a table (Traversing DOM on a condition)

Hello, back again with a question




What i am trying to do here is .. on click of left side of menu categories.. i want to show only those categories in menu... below is how my menu is structured...

<div class="middleContentWrapper">
<table border="0" id="tblMenuType" style="width: 100%;">

<tbody><tr>

<td id="divItem" style="width: 54%; border: 0px solid blue; float: left;" class="name">

                   <span class="menuName" id="ContentPlaceHolder1_reptMenuFull_lblMenuCatHeader_0">Chinese-Soups</span>

                </td>

  <td style="width: 9%;">

    Qty

</td>

  <td style="width: 10%;" class="price">

    Price
 
</td>

<td style="width: 27%;">

  </td>

</tr>

</tbody>
</table>
<table border="0" style="width: 100%;">
    <tbody>
        <tr>
            <td id="divItem" style="width: 54%; border: 0px solid blue; float: left;" class="name">
                <input type="hidden" value="103" id="MeunuId">
                Butter Chicken
            </td>
            <td align="right" style="padding-right: 5px;" id="tdvegNon">
                <img id="ContentPlaceHolder1_reptMenuFull_reptMenuItems_0_Img1_0" src="../Images/Non-Veg.gif">
            </td>
            <td style="width: 9%;">
                <input style="width: 21px;" value="1" class="input-mini" id="txtOderQty">
            </td>
            <td style="width: 10%;" class="price">
                200.00
            </td>
            <td style="width: 27%;">
                <a style="width: 15px;" class="" id="AddOrder"><i class="icon-plus"></i></a>
            </td>
        </tr>
        <tr id="trItemDescp">
            <td colspan="5" id="tdItemDesc">
                <p style="display: none;" id="pItemDescp" class="pItemDescp">
                    <span></span>
                </p>
            </td>
        </tr>
    </tbody>
</table>
<table border="0" id="tblMenuType" style="width: 100%;">

<tbody><tr>

<td id="divItem" style="width: 54%; border: 0px solid blue; float: left;" class="name">

                   <span class="menuName" id="ContentPlaceHolder1_reptMenuFull_lblMenuCatHeader_0">Chinese-Soups</span>

                </td>

   <td style="width: 9%;">

    Qty

</td>

  <td style="width: 10%;" class="price">

     Price
 
</td>

<td style="width: 27%;">

  </td>

</tr>

</tbody>
</table>
<table border="0" style="width: 100%;">
    <tbody>
        <tr>
            <td id="divItem" style="width: 54%; border: 0px solid blue; float: left;" class="name">
                <input type="hidden" value="103" id="MeunuId">
                Butter Chicken
            </td>
            <td align="right" style="padding-right: 5px;" id="tdvegNon">
                <img id="ContentPlaceHolder1_reptMenuFull_reptMenuItems_0_Img1_0" src="../Images/Non-Veg.gif">
            </td>
            <td style="width: 9%;">
                <input style="width: 21px;" value="1" class="input-mini" id="txtOderQty">
            </td>
            <td style="width: 10%;" class="price">
                200.00
            </td>
            <td style="width: 27%;">
                <a style="width: 15px;" class="" id="AddOrder"><i class="icon-plus"></i></a>
            </td>
        </tr>
        <tr id="trItemDescp">
            <td colspan="5" id="tdItemDesc">
                <p style="display: none;" id="pItemDescp" class="pItemDescp">
                    <span></span>
                </p>
            </td>
        </tr>
    </tbody>
</table>
</div>

I want to hide all other categories and their menu items and only show the one selected from left side list...  i have created this type of table structure because i have to add the menu details to the order cart...  

 Please suggest...