user68621 user68621 - 3 months ago 11
CSS Question

How to set up multiple tabs navs in Bootstrap

I am trying to implement a list of data where each of the items, have a tab (pills actually) menu.
The problem is that when I do this, they are interfeering with each other, making it only possible to have 1 active tab at a time, even though they have different id's.

Here is how i am doing it:

First I have one of the menus of tabs/pills for one of the items in the list:

<div class='col-md-12'>
<div class='row'>
<div class='col-md-12' style='margin-top: -50px;'>
<ul class='nav nav-pills'>
<li class='active'><a data-toggle='tab' href='#vis_opgave1'>Vis opgave</a></li>
<li><a data-toggle='tab' href='#rediger_opgave1'>Rediger Tekst</a></li>
<li><a data-toggle='tab' href='#admin_opgave_billeder1'>Administrer billeder</a></li>
</ul>
</div>
</div>
</div>


And here is the content divs for holding the associated datas:

<div id='vis_opgave1' class='tab-pane fade in active'>
<div class='row'>
aaaaaaaa11111111111
</div>
</div>

<div id='rediger_opgave1' class='tab-pane fade'>
<div class='row'>
bbbbbbb11111111
</div>
</div>

<div id='admin_opgave_billeder1' class='tab-pane fade'>
<div class='row'>
cccccccccc1111111
</div>
</div>


I have created a jsfiddle to show you the problem: http://jsfiddle.net/kx96pndg/

When one of the tabs is selected, you can see that the active content of the other nav menu dissapears.

I really hope someone can help me out here. Any help will be greatly appreciated.

Answer

You're missing <div class="tab-content"></div> around the tab-panes. See example.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <div class='col-md-12'>
    <div class='row'>
      <div class='col-md-12' style='margin-top: -50px;'>
        <ul class='nav nav-pills'>
          <li class='active'><a data-toggle='tab' href='#vis_opgave1'>Vis opgave</a>

          </li>
          <li><a data-toggle='tab' href='#rediger_opgave1'>Rediger Tekst</a>

          </li>
          <li><a data-toggle='tab' href='#admin_opgave_billeder1'>Administrer billeder</a>

          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="tab-content">
    <div id='vis_opgave1' class='tab-pane fade in active'>
      <div class='row'>aaaaaaaa11111111111</div>
    </div>
    <div id='rediger_opgave1' class='tab-pane fade'>
      <div class='row'>bbbbbbb11111111</div>
    </div>
    <div id='admin_opgave_billeder1' class='tab-pane fade'>
      <div class='row'>cccccccccc1111111</div>
    </div>
  </div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <div class='col-md-12'>
    <div class='row'>
      <div class='col-md-12' style='margin-top: -50px;'>
        <ul class='nav nav-pills'>
          <li class='active'><a data-toggle='tab' href='#vis_opgave2'>Vis opgave</a>

          </li>
          <li><a data-toggle='tab' href='#rediger_opgave2'>Rediger Tekst</a>

          </li>
          <li><a data-toggle='tab' href='#admin_opgave_billeder2'>Administrer billeder</a>

          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="tab-content">
    <div id='vis_opgave2' class='tab-pane fade in active'>
      <div class='row'>aaaaaaaa22222222</div>
    </div>
    <div id='rediger_opgave2' class='tab-pane fade'>
      <div class='row'>bbbbbbb222222222</div>
    </div>
    <div id='admin_opgave_billeder2' class='tab-pane fade'>
      <div class='row'>cccccccccc2222222</div>
    </div>
  </div>
</div>