24/6/2019 asp.net mvc - How to expand and collapse table row using bootstrap accordion in mvc?

- Stack Overflow

How to expand and collapse table row using bootstrap accordion in

mvc?

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 collapsed
1 if it is expanded then and so on.

<div class=" panel-body">

<table class="table">
@foreach (var item in Model)
{
1 <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>

asp.net-mvc

asked May 23 '18 at 22:06

User9895
https://stackoverflow.com/questions/50498157/how-to-expand-and-collapse-table-row-using-bootstrap-accordion-in-mvc 1/3
24/6/2019 asp.net mvc - How to expand and collapse table row using bootstrap accordion in mvc? - Stack Overflow

155 11

1 Answer

¿No encuentras la respuesta? Pregunta en Stack Overflow en español. ✕

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.
2
<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')
})

https://stackoverflow.com/questions/50498157/how-to-expand-and-collapse-table-row-using-bootstrap-accordion-in-mvc 2/3
24/6/2019 asp.net mvc - How to expand and collapse table row using bootstrap accordion in mvc? - Stack Overflow

Added Style for hiddenRow

.hiddenRow {
padding: 0 !important;
}

answered May 24 '18 at 0:07

User9895
155 11

Solved my problem. – Raj May 24 '18 at 22:59

https://stackoverflow.com/questions/50498157/how-to-expand-and-collapse-table-row-using-bootstrap-accordion-in-mvc 3/3