Is there a way to prevent the row background color from expanding along with the content of the dropdown accordion?
I want the row to remain fixed in place and have the dropdown content start below the selected row. Currently, the style of the row changes completely when the accordion is triggered.
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.custom.min.js"></script>
<link href="~/Content/less/Custom/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
Function:
<script>
$(function () {
$(".myaccordion").accordion({
active: false,
collapsible: true
});
});
</script>
Table:
<div>
<table class="students" style="border-spacing: 0 8px; border-collapse: separate;">
@foreach (var item in Model.project)
{
@:<tr style="background-color:grey;-moz-border-radius: 15px;border-radius: 15px;">
<td class="position">@item.Position</td>
<td class="myaccordion" style="width: 50%;padding-left: 10px;text-align: left;"><a href="#">@item.Name</a>
<div style="font-size:10px;">
@foreach (var name in Model.project1)
{
<div style="-moz-border-radius: 15px;border-radius: 15px;width:100%;padding-top:10px">
<span style="margin-left:1%; text-align: center">@name.Position</span>
<span style="margin-left:8%; text-align: center">@name.Name</span>
<span style="margin-left:10%; text-align: center">@name.Points</span>
</div>
}
</div>
</td>
<td style="width: 13%; text-align: center">@item.Points</td>
<td style="width: 10%; text-align: center;padding-right:10px">@item.Total</td>
@:</tr>
}
</table>
</div>