I am trying to implement a nested repeater with outer repeater showing categories (initially collapsed) and when user clicks + or - inner repeater expands/collapses.
I have the repeaters but when I clicked on + both inner repeaters expanded. I tried to set the class name dynamically so only one would expand but now it sees I broke it.
This is what I have and what I have tried (minus irrelevant stuff):
<asp:Repeater runat="server" ID="rptCategoryList" OnItemDataBound="rptCategoryList_ItemDataBound">
<ItemTemplate>
<div style="font-size: 120%">
<%# Eval("CourseCategory")%>
<i id="br-plus" class="fa fa-plus-circle" style="color: #3697EA; margin-left: 1%; margin-top: 60px;" data-cat="<%# Eval("Abbrev")%>"></i>
<i id="br-minus" class="fa fa-minus-circle" style="color: #3697EA; margin-left: 1%; margin-top: 60px; display: none;"></i>
</div>
<div class="row">
<asp:Repeater runat="server" ID="rptCourses" OnItemDataBound="rptCourses_ItemDataBound" OnItemCommand="rptCourses_ItemCommand">
<HeaderTemplate>
<table class='<%# Eval("Abbrev")%>' style="display: none; margin-top: 10px; font-size: 26px; width: 90%;">
</HeaderTemplate>
<ItemTemplate>
<tr style="border-top: 1px solid #000;">
<td style="padding-top: 30px;">
</td>
...
<td style="padding-top: 30px;">
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
</ItemTemplate>
</asp:Repeater>
I tried adding a data attribute to + and - icons (data-cat), use the same value of category for the table in inner repeater (set its class to be the category name), and in jQuery expand and collapse based on which plus/minus was clicked.
When I view source, icons have correct data attribute (correct category abbreviation) but table's class name is blank.
$(function () {
$('#br-plus').on('click', function () {debugger
var cat = $('#br-plus').data("cat")
//var catID = $('#hfCategoryID').val();
$('.' + cat).toggle();
$(this).hide();
$('#br-minus').show();
});
$('#br-minus').on('click', function () {debugger
//var catID = $('#hfCategoryID').val();
var cat = $('#br-minus').data("cat")
$('.' + cat).toggle();
$(this).hide();
$('#br-plus').show();
});
Update - result of View Source
$(function() {
//$('.courses').hide();
$('#br-plus').on('click', function() {
debugger
var cat = $(this).data("cat")
//var catID = $('#hfCategoryID').val();
$('.' + cat).toggle();
$(this).hide();
$('#br-minus').show();
$(this).siblings().show();
});
$('#br-minus').on('click', function() {
debugger
//var catID = $('#hfCategoryID').val();
var cat = $(this).data("cat")
$('.' + cat).toggle();
$(this).hide();
$('#br-plus').show();
$(this).siblings().hide();
});
$('#net-plus').on('click', function() {
$('.courses-net').toggle();
$(this).hide();
$('#net-minus').show();
});
$('#net-minus').on('click', function() {
$('.courses-net').toggle();
$(this).hide();
$('#net-plus').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div style="font-size: 120%">
Delivery Operations
<i id="br-plus" class="fa fa-plus-circle" style="color: #3697EA; margin-left: 1%; margin-top: 60px;" data-cat="DelOps">+</i>
<i id="br-minus" class="fa fa-minus-circle" style="color: #3697EA; margin-left: 1%; margin-top: 60px; display: none;" data-cat="DelOps">-</i>
</div>
<div class="row">
<!-- This is where the content of inner repeater is; note emply class name -->
<table class='' style="display: none; margin-top: 10px; font-size: 26px; width: 90%;">
<tr style="border-top: 1px solid #000;">
<td style="padding-top: 30px;">
</td>
<td style="text-align: center;">
</td>
</tr>
<tr style="border-top: 1px solid #000;">
<td style="padding-top: 30px;">
</td>
<td style="text-align: center;">
</td>
</tr>
</table>
</div>
<div style="font-size: 120%">
Network Operations
<i id="br-plus" class="fa fa-plus-circle" style="color: #3697EA; margin-left: 1%; margin-top: 60px;" data-cat="NetOps">+</i>
<i id="br-minus" class="fa fa-minus-circle" style="color: #3697EA; margin-left: 1%; margin-top: 60px; display: none;" data-cat="NetOps">-</i>
</div>
<div class="row">
<table class='' style="display: none; margin-top: 10px; font-size: 26px; width: 90%;">
<tr style="border-top: 1px solid #000;">
<td style="padding-top: 30px;">
</td>
<td style="text-align: center;">
</td>
</tr>
<tr style="border-top: 1px solid #000;">
<td style="padding-top: 30px;">
</td>
<td style="text-align: center;">
</td>
</tr>
</table>
</div>
</body>