title: How to set up multiple tabs navs in Bootstrap
body: <p>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.</p>
  
  <p>Here is how i am doing it:</p>
  
  <p>First I have one of the menus of tabs/pills for one of the items in the list:</p>
  
  <pre><code>&lt;div class='col-md-12'&gt;
      &lt;div class='row'&gt;
          &lt;div class='col-md-12' style='margin-top: -50px;'&gt;
              &lt;ul class='nav nav-pills'&gt;
                  &lt;li class='active'&gt;&lt;a data-toggle='tab' href='#vis_opgave1'&gt;Vis opgave&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a data-toggle='tab' href='#rediger_opgave1'&gt;Rediger Tekst&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a data-toggle='tab' href='#admin_opgave_billeder1'&gt;Administrer billeder&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the content divs for holding the associated datas:</p>
  
  <pre><code>&lt;div id='vis_opgave1' class='tab-pane fade in active'&gt;
      &lt;div class='row'&gt;
          aaaaaaaa11111111111
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id='rediger_opgave1' class='tab-pane fade'&gt;
      &lt;div class='row'&gt;
          bbbbbbb11111111
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id='admin_opgave_billeder1' class='tab-pane fade'&gt;
      &lt;div class='row'&gt;
          cccccccccc1111111
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have created a jsfiddle to show you the problem: <a href="http://jsfiddle.net/kx96pndg/" rel="nofollow">http://jsfiddle.net/kx96pndg/</a></p>
  
  <p>When one of the tabs is selected, you can see that the active content of the other nav menu dissapears.</p>
  
  <p>I really hope someone can help me out here. Any help will be greatly appreciated.</p>