I have made some modifications to the Bootstrap Tabs, where I am now pulling the ID from a controller instead of specifying them directly.
Everything is working perfectly, except for the tabs with IDs that have spaces between words. These tabs are not functioning as expected.
In summary, single-word tabs work fine, but tabs with multiple words do not work.
Below is the updated code:
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
@foreach (var qs in Model)
{
<li role="presentation"><a href="#@qs.QuestionSectionName" aria-controls="home" role="tab" data-toggle="tab">@qs.QuestionSectionName</a></li>
}
</ul>
<!-- Tab panes -->
<div class="tab-content">
@foreach (var qs in Model)
{
<div role="tabpanel" class="tab-pane active" id="@qs.QuestionSectionName">
<table class="table">
<tbody>
@foreach (var item in qs.Questions)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.QuestionName)
</td>
<td>
@Html.DisplayFor(modelItem => item.QuestionSection.QuestionSectionName)
</td>
</tr>
}
</tbody>
</table>
</div>
}
</div>
Thank you.