Bootstrap nav-tabs not displaying tab-content in mvc?-CodePudding

I'm Dynamically generating/loading tabs from controllers using list.

<div row>
<div >
<!-- Tabs nav -->
  <div  id="v-pills-tab" role="tablist" aria-orientation="vertical">
      @foreach (var item in ViewBag.Controls)
       {
          <a  id="v-pills-home-tab" data-toggle="pill" href="#@item.Control" role="tab" aria-controls="v-pills-home" aria-selected="true">
               <span >@item.Control</span>     //tabs 
         </a>
       }
  </div>
  <!-- /Tabs nav -->
</div>
<div >
<!-- Tabs content -->
  <div  id="v-pills-tabContent">
        @foreach (var item in ViewBag.Controls)
        {
         <div  id="@item.Control" role="tabpanel" aria-labelledby="v-pills-home-tab">
          <h5 >@item.Control</h5>                //tab content
        }
  </div>
   <!-- /Tabs content -->
</div>

The thinks is I managed to generate tabs nav bar but not tab content. For more look and fill of tabs here is fiddle to follow: https://jsfiddle.net/bootstrapious/68o3pmcv/

CodePudding user response：

Your html has various errors and typos e.g.

<div row> should be <div >

Also the row div and the tab-pane div do not have a closing tags.

But the main issue with your code is that you are adding show active classes to all tab-pane divs. I added a boolean flag to the ViewBag.Controls items and only add show active classes when the flag is true. Final result:

<div >
    <div >
        <!-- Tabs nav -->
        <div  id="v-pills-tab" role="tablist" aria-orientation="vertical">
            @foreach (var item in ViewBag.Controls)
            {
                <a active" : null)" id="v-pills-home-tab" data-toggle="pill" href="#@item.Control" role="tab" aria-controls="v-pills-home" aria-selected="true">
                    <span >@item.Control</span>
                </a>
            }
        </div>
        <!-- /Tabs nav -->
    </div>
    <div >
        <!-- Tabs content -->
        <div  id="v-pills-tabContent">
            @foreach (var item in ViewBag.Controls)
            {
                <div show active" : null)" id="@item.Control" role="tabpanel" aria-labelledby="v-pills-home-tab">
                    <h5 >@item.Control</h5>
                </div>
            }
        </div>
        <!-- /Tabs content -->
    </div>
</div>

I tested above code with this data:

ViewBag.Controls = new[]
{
    new { Control = "test1", Active = false },
    // Selected by default. You can change this but only add active true to one item.
    new { Control = "test2", Active = true }, 
    new { Control = "test3", Active = false },
    new { Control = "test4", Active = false }
};