How to expand and collapse table row using Bootstrap Accordion and ASP.NET MVC? - asp.net-mvc

Question

I want to expand and collapse table row using Bootstrap Accordion.
Currently, if I click on any row, it expands and collapse. But what I want is that, if I click on second row then first row should collapse if it is expanded then and so on.
<div class=" panel-body">
<table class="table">
#foreach (var item in Model)
{
<tr>
<td class="accordion-toggle" data-toggle="collapse" data-target="#AA_#(item.Id)">
<button class="bb" type="button">
#Html.Raw(item.H)
</button>
</td>
<td>
#Html.Raw(item.E)
</td>
</tr>
<tr>
<td id="AA_#(item.Id)" class="accordion-body collapse">
<table>
<tr>
<td>
#Html.Raw(item.D)
</td>
<td>
#Html.Raw(item.B)
</td>
</tr>
</table>
</td>
</tr>
}
</table>
</div>

Answer 1

I researched my problem on SO and found one solution provided by #tmg on here. Many thanks to #tmg. I followed the same in my scenario and it worked for me.
<div class="panel-body">
<table class="table">
#foreach (var item in Model)
{
<tr class="accordion-toggle" data-toggle="collapse" data-target="#AA_#(item.Id)">
<td>
<button class="bb" type="button">
#Html.Raw(item.H)
</button>
</td>
<td>
#Html.Raw(item.E)
</td>
</tr>
<tr>
<td class="hiddenRow">
<div class="accordian-body collapse" id="AA_#(item.Id)">
<table>
<tr>
<td>
#Html.Raw(item.D)
</td>
<td>
#Html.Raw(item.B)
</td>
</tr>
</table>
</div>
</td>
</tr>
}
</table>
</div>
And added JQuery to collapse and toggle table row
$('.table .accordian-body').on('show.bs.collapse', function () {
$(this).closest("table")
.find(".collapse.in")
.not(this)
.collapse('toggle')
})
Added Style for hiddenRow
.hiddenRow {
padding: 0 !important;
}