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

Question

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>

I updated the answer.... Have a look. – Tirthraj Barot Jun 15 '16 at 07:06 — Tirthraj Barot, Jun 15 '16 at 07:06

Tirthraj Barot · Answer 1 · 2016-06-15T07:16:39.997

1

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>

edited Jun 15 '16 at 07:16

answered Jun 15 '16 at 06:56

Tirthraj Barot

2,671
2
17
33

Thanks Tirthraj. But now only the pills are getting toggled. The divs stopped getting toggled. – Shubham Goyal Jun 15 '16 at 07:08
Yeah that is the kind of thing I am getting. If you run the code you'll notice first gets printed on top but "second" gets printed a line below and that is the exact problem I was facing – Shubham Goyal Jun 15 '16 at 07:13
You have already marked the above answer correct @ShubhamGoyal You are done with the problem aren't you? – Tirthraj Barot Jun 15 '16 at 07:15
And I would be glad if I could get your vote-up.. @ShubhamGoyal – Tirthraj Barot Jun 15 '16 at 07:18
I would If I could. My reputation still 14. Still a Beginner. Sorry! – Shubham Goyal Jun 15 '16 at 07:20
Now You can @ShubhamGoyal – Tirthraj Barot Jun 15 '16 at 07:21
I have no idea how that happened – Shubham Goyal Jun 15 '16 at 07:22
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/114700/discussion-between-tirthraj-barot-and-shubham-goyal). – Tirthraj Barot Jun 15 '16 at 07:22

Marek Kus · Accepted Answer · 2016-06-15T07:10:29.817

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

Thanks a lot Marek Kus !! Worked perfectly. I thought without using tabpanel we could use that. — Shubham Goyal, Jun 15 '16 at 07:09

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

2 Answers2