Bootstrap Tabs with Spaces in URL

Question

I've modified the Bootstrap Tabs slightly so that they pull the ID from a controller rather than specify them.

It is all working perfectly, however some of the ID's its pulling through have spaces between words. This is causing those Tabs not to work.

Basically, all Tabs with a Single word work fine, however those with multiple words do not work.

Here is my 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>

Thanks.

Answer 1

When clicked, Bootstrap looks for a corresponding .tab-pane with a unique ID and, unfortunately, IDs cannot contain spaces.

You'll to hyphenate the value(s) of the @qs.QuestionSectionName as it steps through the loop.