jQuery show / hide doesn't work when moving div inside another

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;" /&g开发者_Python百科t;
            </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?

a repeater makes me think that there is more then one of these on the page. and basic day one html says: you can't have things with the same ID!

so, you'll have to give it a common class, but a unique id. we'd have to see a bit more code to figure out what exactly the best way to get around this is though.

jquery get's very confused when there is more then one thing with the same id on a page.

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.

I think it should work. But to find out why I would try a couple of things first...

1 - Try changing the selector to use a class instead of ID...

$(".InfoClass").show();

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

2 - Check the Show and Hide methods are called - Add alerts before and after each...

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

See what happens from here

EDIT: The conflict of multiple IDs with the same values (like everyone has said) was my initial thoughts... however, I am sure I had it working with same ID values a while back, so didn't want to just say that was the problem - better to provide some testing options

Inside a repeater, the DIV's ID is no longer unique. Therefore you have to target by using a CSS class, or some other combination. What are you trying to do with this? Do you want to show/hide all at one time? If you give it a css class named "EmailForMoreInfo" and do:

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

That would work, but if you need to do something at the row level, let us know and we can help more.