Use Jquery toggle on repeater items

Question

I am displaying data on my page using repeater and I'd like to use a jquery toggle to show/hide the address fields to make the page more user friendly.

Here is the repeater

<asp:Repeater ID="RepeaterPersonBasicData" runat="server">
<ItemTemplate>
<div id="Maindetails" class="dataContentSection" runat="server">
    <div id="Div1" visible="true" runat="server">
        <span id="Span1" class="dataFieldText" runat="server">Name:</span> 
        <span id="Span1444" runat="server"><%# Eval("Name")%></span>
    </div>
    <div id="Div2" visible="true" runat="server">
        <span id="Span3" class="dataFieldText" runat="server">DOB:</span> 
        <span id="Span1443" runat="server"><%# Eval("DOB")%></span>
    </div>
    <div id="Div3" visible="true" runat="server">
        <span id="Span5" class="dataFieldText" runat="server">Age:</span> 
        <span id="Span1442" runat="server"><%# Eval("Age")%></span>
    </div>
</div>
<a href="javascript:void(0);" id="toggleAddressdetails" class="titleText" runat="server">+ Address details</a>
<div id="Addressdetails" class="dataContentSection" runat="server" style="display: none;">
    <div id="Div78" visible="true" runat="server">
        <span id="Span144" class="dataFieldText" runat="server">Address Line 1:</span> 
        <span id="Span246" runat="server"><%# Eval("Address1")%></span>
    </div>
    <div id="Div80" visible="true" runat="server">
        <span id="Span148" class="dataFieldText" runat="server">>Address Line 2:</span> 
        <span id="Span147" runat="server"><%# Eval("Address2")%></span>
    </div>
    <div id="Div82" visible="true" runat="server">
        <span id="Span152" class="dataFieldText" runat="server">>Address Line 3:</span> 
        <span id="Span151" runat="server"><%# Eval("Address3")%></span>
    </div>
    <div id="Div84" visible="true" runat="server">
        <span id="Span156" class="dataFieldText" runat="server">>Address Line 4:</span> 
        <span id="Span155" runat="server"><%# Eval("Address4")%></span>
    </div>
</div>

<br />
</ItemTemplate>
</asp:Repeater> 

Essentially I want to include some javascript like this so that the toggling can be enabled for each repeater item. I tried using .ClientID but this did not work inside the repeater. Just to prove it would work I have tried including the javascript, and it does work but obviously only for the first five repeater items.

<script type="text/javascript">
    $(function () {
        $('#ctl00_cphBody_ctl00_ctl00_RepeaterPersonBasicData_ctl00_toggleAddressdetails').click(function () {
            $('#ctl00_cphBody_ctl00_ctl00_RepeaterPersonBasicData_ctl00_Addressdetails').toggle();
        });
    });
    $(function () {
        $('#ctl00_cphBody_ctl00_ctl00_RepeaterPersonBasicData_ctl01_toggleAddressdetails').click(function () {
            $('#ctl00_cphBody_ctl00_ctl00_RepeaterPersonBasicData_ctl01_Addressdetails').toggle();
        });
    });
    $(function () {
        $('#ctl00_cphBody_ctl00_ctl00_RepeaterPersonBasicData_ctl02_toggleAddressdetails').click(function () {
            $('#ctl00_cphBody_ctl00_ctl00_RepeaterPersonBasicData_ctl02_Addressdetails').toggle();
        });
    });
    $(function () {
        $('#ctl00_cphBody_ctl00_ctl00_RepeaterPersonBasicData_ctl03_toggleAddressdetails').click(function () {
            $('#ctl00_cphBody_ctl00_ctl00_RepeaterPersonBasicData_ctl03_Addressdetails').toggle();
        });
    });
    $(function () {
        $('#ctl00_cphBody_ctl00_ctl00_RepeaterPersonBasicData_ctl04_toggleAddressdetails').click(function () {
            $('#ctl00_cphBody_ctl00_ctl00_RepeaterPersonBasicData_ctl04_Addressdetails').toggle();
        });
    });
</script>

I am of course open to a different approach to achieve the same goal of having the collapsible content inside the repeater.

Answer 1

A quick way could be to use classes rather than id selectors. This should work as a starter:

$(function () {
  $('a.titleText').on('click', function (ev) {
    $(this).next('div').toggle();
  });
});

I would then optimize the event listener to use delegation rather than creating an event for each link.

Answer 2

I think, this code is helpful for you. It hides all ".dataContentSection" items, and then just opens ".dataContentSection" element inside the target itemTemplate.

$(function () {
  $('a.titleText').on('click', function (ev) {
$(".dataContentSection").each(function(){
$(this.hide();
});
    $(this).next('div').toggle();
  });
});

Answer 3

The easiest way to do this is to not use ID's, rather use class names for your selectors. As an example, here is some HTML based from your code:

<div id="repeater">
<!-- item 1 -->
<div class="dataContentSection">
    <div>Name</div>
</div>
<a href="javascript:void(0);" class="titleText toggler">+ Address details</a>
<div class="dataContentSection" style="display: none;">
    <div>Address Line 1:</div>
    <div>Address Line 2:</div>
    <div>Address Line 3:</div>
</div>
<!-- item 2 -->
<div class="dataContentSection">
    <div>Name</div>
</div>
<a href="javascript:void(0);" class="titleText toggler">+ Address details</a>
<div class="dataContentSection" style="display: none;">
    <div>Address Line 1:</div>
    <div>Address Line 2:</div>
    <div>Address Line 3:</div>
</div>
<!-- etc -->
</div>

Notice I removed the ID's for simplicity. I also added the class name 'toggler' to the anchor tags.

Then use this for your script:

<script type="text/javascript">
$(function() {
    $('a.toggler').on('click', function() {
        $('+ div', this).toggle();
    });
});
</script>

When this script is executed, it binds an event handler to all anchor elements with the class name 'toggler'. The event handler, when executed, simply calls the jQuery toggle() method on the individual element's DIV sibling.

Here is a complete JS fiddle: http://jsfiddle.net/P5tZX/