Toggle rows created using Repeater Control ASP.NET

Question

I am creating a list of data using Repeater Control. Some of the rows might have other rows that should be toggled using the main row's clickable image.

Here, is the HTML part

<table cellpadding="2" cellspacing="0" width="100%">
                <asp:Repeater ID="repeatLockers" runat="Server">
                    <HeaderTemplate>
                        <tr>
            <td>&nbsp;</td>
                            <td>A</td>
                        </tr>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <tr id="trItem" class="SomeParentClass" runat="server">
                            <td>
                                <img id="imgToggleHomeInfo" runat="server" alt="show/hide repetitves" src="icon_plus.gif"
                                    style="cursor: pointer" />
                            </td>
                            <td>
                                <asp:Label ID="lbl" runat="server"></asp:Label>
                            </td>
                        </tr>
                        <tr id="trAddOnFee" runat="server" class="SomeClass" style="display: none;">
                            <td colspan="2">
                                <table cellpadding="4" cellspacing="2" width="100%">
                                    <tr>
                                        <td class="DgHeader">A</td>
                                        <td class="DgHeader">B</td>
                                    </tr>
                                    <asp:Repeater ID="repeatRepetitives" runat="server">
                                        <ItemTemplate>
                                            <tr>
                                                <td>
                                                    <asp:Label ID="lblA" runat="server"></asp:Label>
                                                </td>
                                                <td align="right"> 
                                                    <asp:Label ID="lblB" runat="server"></asp:Label>
                                                </td>
                                            </tr>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </table>
                            </td>
                        </tr>
                    </ItemTemplate>
                </asp:Repeater>
            </table>

How could I toggle the Rows with class as "SomeClass" inside on click of imgToggleHomeInfo" image on its parent row using Jquery?

Answer 1

I'd find the parent row of the image then toggle it's next sibling.

$(document).ready( function() {
    $("[id$='imageToggleHomeInfo']").click( function() {
        $(this).closest('tr').next().toggle();
    });
})