Scribd
Upload
985 views3 pages

MVC - How To Expand and Collapse Table Row Using Bootstrap Accordion in MVC - Stack Overflow

The document discusses how to implement an expanding and collapsing accordion for table rows in an MVC application using Bootstrap. The user wants clicking a row to collapse the currently expanded row and expand the clicked row. An answer provides code to add classes to toggle expansion on click and collapse other rows, along with jQuery to handle the toggling. Styles are also included to remove padding from collapsed rows. This resolved the issue for the original poster.

Uploaded by

Arturo Sanz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
985 views3 pages

MVC - How To Expand and Collapse Table Row Using Bootstrap Accordion in MVC - Stack Overflow

The document discusses how to implement an expanding and collapsing accordion for table rows in an MVC application using Bootstrap. The user wants clicking a row to collapse the currently expanded row and expand the clicked row. An answer provides code to add classes to toggle expansion on click and collapse other rows, along with jQuery to handle the toggling. Styles are also included to remove padding from collapsed rows. This resolved the issue for the original poster.

Uploaded by

Arturo Sanz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

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

You might also like