CODEWITHSUNDEEP
twitter-bootstrap
Jeff
Jeff

Reputation: 41

Twitter Bootstrap Tabs - Not Hiding Content from Each Tab on Click

The tabs load but on click of the unactive tab it loads that content and still has the content from the other tab. All content from other tabs is loaded on click of that tab.

Link to HTML: http://stl-sportszone.com/taco/

HTML - Loading default BS nav-tabs.

<div  class="row">
    <div class="span4">
      <h2>Your Brands</h2>
    </div>
    <div class="span12">
        <ul  class="nav nav-tabs">
          <li class="active"><a href="#pane1" data-toggle="tab">Sewing</a></li>
          <li><a href="#pane2" data-toggle="tab">Vacs</a></li>
          <li><a href="#pane3" data-toggle="tab">Commerical</a></li>
          <li><a href="#pane4" data-toggle="tab">Fans</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="pane1">
              <div class="row">
                <div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
                <div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
                <div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
                <div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
              </div>
              <div class="spacer10"></div>
              <div class="row">
                <div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
                <div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
                <div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
                <div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
              </div>
            </div>
        </div>
        <div class="tab-content">
            <div class="tab-pane" id="pane2">
              <div class="row">
                <div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
                <div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
                <div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
                <div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
              </div>
            </div>
        </div>
        <div class="tab-content">
            <div class="tab-pane" id="pane3">
              <div class="row">
                <div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
                <div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
                <div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
                <div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
              </div>
            </div>
        </div>
        <div class="tab-content">
            <div class="tab-pane" id="pane4">
              <div class="row">
                <div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
                <div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
                <div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
                <div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
              </div>
            </div>
        </div>
    </div>
  </div>         
</div> <!-- /container -->

Javascript 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Bootstrap JS: compiled and minified -->
<script src="js/bootstrap.min.js"></script>

Upvotes: 4

Views: 3249

Answers (1)

merv
merv

Reputation: 76740

All of your div.tab-pane's should be in a single div.tab-content.

<div  class="row">
  <div class="span4">
    <h2>Your Brands</h2>
  </div>
  <div class="span12">
    <ul  class="nav nav-tabs">
      <li class="active"><a href="#pane1" data-toggle="tab">Sewing</a></li>
      <li><a href="#pane2" data-toggle="tab">Vacs</a></li>
      <li><a href="#pane3" data-toggle="tab">Commerical</a></li>
      <li><a href="#pane4" data-toggle="tab">Fans</a></li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="pane1">
        ...
      </div>
      <div class="tab-pane" id="pane2">
        ...
      </div>
      <div class="tab-pane" id="pane3">
        ...
      </div>
      <div class="tab-pane" id="pane4">
        ...
      </div>
    </div>
  </div>
</div>

Upvotes: 7

Related Questions