I'm attempting to include a downward arrow when the section is closed and an upper arrow when it's open - at the right side of each tab's head in the accordion.
Here is the HTML I have implemented. It contains for-each loops.
-- JavaScript
$(function () {
$('tr.accordion').click(function () {
$(this).nextUntil('.accordion').slideToggle(20);
});
});td.bg-light-blue{ background-color:rgb(233,242,253) }
.text-mid{ font-size:14px }<div class="box-table" id="div_SummaryReport">
<table class="research table text-center" id="tblSummary" width="100%">
<thead style="position:relative;">
<tr style="position:relative;">
<th align="center" width="20%" style="position:relative;"> </th>
<th align="center" width="20%" style="position:relative;" data-toggle="tooltip" data-placement="top" title="Total Calls"> Total Calls</th>
<th align="center" width="20%" style="position:relative;" data-toggle="tooltip" data-placement="top" title="Contacted"> Contacted</th>
<th align="center" width="20%" style="position:relative;" data-toggle="tooltip" data-placement="top" title="#of saved calls"> Saved</th>
<th align="center" width="20%" style="position:relative;" data-toggle="tooltip" data-placement="top" title="Percent"> Percent %</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.GroupingData) {
<tr class="accordion">
<td class="bg-light-blue text-mid" colspan="5"><span class="text-blue">@item.Key</span></td>
<td class="bg-light-blue">downarrow</td>
</tr>
foreach (var data in item.Value) {
<tr class="hidden-row">
<td>@data.Name</td>
<td>@data.TotalCalls</td>
<td>@data.Contacted</td>
<td>@data.Saved</td>
<td>@data.Percentage</td>
</tr>
} }
</tbody>
</table>
</div>The actual page closely resembles this Fiddle: https://jsfiddle.net/jmmanne/35nne25r/ This example uses plain html without any loops