CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapnav-pills
Shubham Goyal
Shubham Goyal

Reputation: 667

Bootstrap nav pills- first nav pill data still there when 2nd nav pill active

I am using Bootstrap pills for toggling on the same page. There are two nav-pills and two divs corresponding to each of them.I have constructed the first div correctly and is working fine. But when I am trying to construct the second div, the contents of the first div are hindering in the construction of the second div. For ex: the col-* classes not working properly. In short the data of the first div, although invisible, is still there when I am on the second page.

<ul class="nav nav-pills container-fluid" style = "margin-left:10px;">
  <li class="active"><a href="#homeTab" data-toggle = "pill">Download Data</a></li>
  <li><a href="#metaTab" data-toggle = "pill">Metadata</a></li>
</ul>

<div class="container-fluid tab-content fade in active" id = "homeTab">
 ....    
</div>

<div class="container-fluid tab-content fade" id = "metaTab">
 ....    
</div>

Upvotes: 1

Views: 1435

Answers (2)

Tirthraj Barot
Tirthraj Barot

Reputation: 2679

You just need to include bootstrap.js 

.tab-pane{
  position:absolute;
  top 200px;
  left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<ul class="nav nav-pills container-fluid" style = "margin-left:10px;">
  <li><a href="#homeTab" data-toggle = "pill">Download Data</a></li>
  <li><a href="#metaTab" data-toggle = "pill">Metadata</a></li>
</ul>

<div class="tab-pane fade in active" id = "homeTab">
 ....    FIRST
</div>

<div class="tab-pane fade" id = "metaTab">
 ....    SECOND
</div>

Upvotes: 1

Marek Kus
Marek Kus

Reputation: 150

You are misusing tab-content class. It should be wrapped around all tabs, and tabs should have tab-pane class instead, like this:

<ul class="nav nav-pills container-fluid" style = "margin-left:10px;">
  <li class="active"><a href="#homeTab" data-toggle = "pill">Download Data</a></li>
  <li><a href="#metaTab" data-toggle = "pill">Metadata</a></li>
</ul>

<div class="tab-content">
    <div role="tabpanel" class="container-fluid tab-pane fade in active" id = "homeTab">
    ...tab 1 content...
    </div>

    <div role="tabpanel" class="container-fluid tab-pane fade" id = "metaTab">
    ...tab 2 content...    
    </div>
</div>

Here is more about tabs in bootstrap: http://getbootstrap.com/javascript/#tabs

Upvotes: 1

Related Questions