Question

I’ve been wracking my brain on this one and can’t figure out why jQuery won’t show / hide a div when I place it inside a repeater. Here’s the div that I’m trying to show / hide:

<div id="EmailForMoreInfo">Hey there!</div>

The jQuery that I use to show / hide it is here:

if (event.srcElement && event.srcElement.hash == "#2") {
    $("#EmailForMoreInfo").show();
} else {
    $("#EmailForMoreInfo").hide();
}

The placement of the ‘EmailForMoreInfo’ is placed inside a repeater:

    <div class="panes">
    <asp:Repeater ID="rptProductsCategories" runat="server">
        <ItemTemplate>
            <div id="tabs-<%# DataBinder.Eval(Container.DataItem, "Key") %>">
            <div id="EmailForMoreInfo">Hey there!</div>
            <br style="clear:both;" />
            </div>
        </ItemTemplate>   
    </asp:Repeater>
    </div>

The above jQuery does not work when the ‘EmailForMoreInfo’ is placed inside the repeater. Moving it outside the repeater, everything works. Analyzing the jQuery shows that it finds the element just fine in either case, but only when it is outside the repeater does it actually show / hide correctly. Otherwise, it always shows. Anyone else run into this and have a workaround?

Answer 1

I’m not that familiar with ASP.NET, but it sounds like you’re creating more than one element with a given ID. Element IDs must be unique. Use the class attribute instead.