Question

I have a div inside an asp:Repeater:

   <ItemTemplate>
          <div id="myDiv" style="display:none" />
   </ItemTemplate>
</asp:Repeater>

<script type="text/javascript">
    window.onload = function() {
          document.getElementById('myDiv').style.display = 'block';
</script>

This works great except my div elements occur within a repeater which means only the first div is found. Could some please explain to me how to get all the divs in the ItemTemplate?

Answer 1

It is invalid to use the same id more than once on a page. Instead you’ll have to use some other means of finding your elements, such as css class. jQuery makes this task easy.

$(".someClass").show();

However, you may not even need to do that. If all you are trying to do is change some styles on a set of elements under a common parent, you can just change the class name of the parent. Consider the following repeater:

<div id="repeaterParent">
    <asp:Repeater runat="server">
        <ItemTemplate>
            <div class="repeaterItemDiv"></div>
        </ItemTemplate>
    </asp:Repeater>
</div>

Set up your css like this:

#repeaterParent .repeaterItemDiv
{
    display: none;
}
#repeaterParent.showDivs .repeaterItemDiv
{
    display: block;
}

Then use this JavaScript:

document.getElementById("repeaterParent").className = "showDivs";

Or, this jQuery:

$("#repeaterItemParent").addClass("showDivs");