JQuery Hide table with an enumerated list

Question

I have the following that will enumerate over the model and add an invoice and a date. Then under that I want to have a table with the line items for that invoice that is collapsible for each invoice. I am not sure how to do this while enumerating over the model, I don't know how to uniquely ID the table, then I am not sure how to tell the jquery function which table we need to hide.

here is the code I have now. I added a comment next to the table I am wanting to hide. There is an anchor tag above it that calls the javascript function in which is the jquery hide function is

 <table class="themedtable"
    cellspacing="0">
    <tr>
        <th style="text-align: left">
            Invoice
        </th>
        <th>
            Order Date
        </th>
    </tr>
    <% foreach (var item in Model)
       { %>
    <tr>
        <td style="text-align: left">
            <strong>
                <%=Html.Encode(item.Invoice)%></strong>
        </td>
        <td>
            <%=Html.Encode(String.Format("{0:d}",item.invcte))%>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <a href="javascript:toggletable()">Show/Hide Table</a>
        </td>
    </tr>
    <%if (item.LineItemList.Count > 0)
   { %>
    <tr>
        <td>
            <table style="margin-left: auto; margin-right: auto; width: 90%" cellspacing="0">  //this is the table i need to id and collapse when the above link is clicked
                <tr>
                    <th>
                        Part
                    </th>
                    <th>
                        Desc
                    </th>
                    <th>
                        Qty
                    </th>
                    <th>
                        Qty Shipped
                    </th>
                    <th>
                        Status
                    </th>
                </tr>
                <%foreach (var lineItem in item.LineItemList)
                    { %>
                <tr>
                    <td style="width: 10%">
                        <%=Html.Encode(lineItem.Partno) %>
                    </td>
                    <td style="width: 50%">
                        <%=Html.Encode(lineItem.Description) %>
                    </td>
                    <td style="width: 10%">
                        <%=Html.Encode(lineItem.Qty) %>
                    </td>
                    <td style="width: 20%">
                        <%=Html.Encode(lineItem.QtyShipped) %>
                    </td>
                    <td style="width: 10%">
                        <%=Html.Encode(lineItem.Status) %>
                    </td>
                </tr>
                <%} %>
            </table>
        </td>
    </tr>
    <%} %>
    <%} %>
</table>

<script type="text/javascript">
    function toggletable() {
        $(//selector).hide();
    }

Answer 1

Here are my two cents worth. I think you may be approaching this in a manner that will make life hard for you.

What I'd do is the following.

1. Add your invoices if you like and attach a click event to them.
2. On click of the invoice, do an Ajax postback, using jQuery, to get the line items.
3. Your ActionResult should then grab those line items, pass them to a PartialView and return the PartialView back to the client.
4. Then in your Success jQuery Ajax method, you replace the contents of a div with the returned HTML.

This saves potentially a lot of data on the page and also makes it look quite neat.