I am facing an issue with toggling multiple tables created dynamically within a View using jQuery. Despite trying various methods to hide/show the div containing the table, only the first table is being toggled. While I have come across examples of applying toggle on table rows, implementing it for the entire table seems to be challenging.
HTML
<div class="col-md-10" id="main">
@foreach (var item in Model)
{
<div id="ConfigName">
<h3><b>@item.ConfigurationCollection.CollectionName</b></h3>
</div>
<div id="ConfigDetails" style="display:none">
<table class="table">
<tr>
@foreach (var lis in item.ListConfiguration)
{
<th>@lis.Option.OptionName</th>
}
</tr>
<tr>
@foreach (var lis in item.ListConfiguration)
{
<td>
@foreach (var ov in lis.OptionValue)
{
@ov.OptionVal
<br />
}
</td>
}
</tr>
</table>
</div>
}
Script (Comments include everything I tried)
<script type="text/javascript">
$(document).ready(function () {
$('#ConfigName').click(function () {
//$('#ConfigDetails').slideToggle();
//$(this).parent().find('#ConfigDetails').slideToggle();
var closest = $(this).closest().find('#ConfigDetails').is(":visible");
if(!closest)
{
$(this).find('$ConfigDetails').slideToggle();
}
});
});
</script>