A unique report was designed with a Bootstrap accordion feature to expand and collapse grouped data. The sections within the accordion include Monthly, Weekly, Daily, and Services.
<thead style="font-size:12px">
...
</thead>
<tbody>
@foreach (var server in Model.Report)
{
...
@foreach (var month in server.Monthly)
{
...
@foreach (var week in month.Weekly)
{
...
@foreach (var day in week.Daily)
{
...
@foreach (var service in day.Services)
{
...
}
}
}
}
}
</tbody>
</table>
https://i.sstatic.net/zK3YF.png
The goal is to make it so that when any upper section is clicked closed, the lower open section will also close automatically. Currently, closing an upper section does not affect the lower open sections.
Attempts were made using data-parent and JQuery to address this issue, but no successful solution has been found yet.
$(".collapse").on('show.bs.collapse', function () {
$(this).collapse('hide');
alert('Trigger');
});
});
Your guidance on how to progress would be greatly appreciated!