CODEWITHSUNDEEP
twitter-bootstrap-3
Enkhtuvshin
Enkhtuvshin

Reputation: 67

bootstrap tabs stops working after working

I'm using a bootstrap tabs to create a timeline like tabs. It works only first 4 times and then stops changing after that. I made a fiddle please look into it.

code:

<ul class="nav nav-tabs" role="tablist" id="timeline">
    <div class="col-sm-3"><li role="presentation"><a href="#2011" aria-controls="2011" role="tab" data-toggle="tab">2011</a></li></div>
    <div class="col-sm-3"><li role="presentation"><a href="#2013" aria-controls="2013" role="tab" data-toggle="tab">2013</a></li></div>
    <div class="col-sm-3"><li role="presentation"><a href="#2014" aria-controls="2014" role="tab" data-toggle="tab">2014</a></li></div>
    <div class="col-sm-3"><li role="presentation"><a href="#2016" aria-controls="2016" role="tab" data-toggle="tab">2016</a></li></div>
  </ul>

<div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="2011">
        <p>1</p>
  </div>
  <div role="tabpanel" class="tab-pane fade" id="2013">
    <p>2</p>
  </div>
  <div role="tabpanel" class="tab-pane fade" id="2014">
    <p>
    3</p>
  </div>
  <div role="tabpanel" class="tab-pane fade" id="2016">
    <p>
        4
    </p>
  </div>
</div>

script:

$('#timeline a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Upvotes: 2

Views: 1291

Answers (1)

Web Dev Guy
Web Dev Guy

Reputation: 1789

Make sure you close off your code statements with a semi colon ;

Also needed to remove the active class for the tabs li. Web dev tools are your friend. watch for classes which may be added

$('#timeline a').click(function (e) {
  $('#timeline li').removeClass('active');
  e.preventDefault();
  $(this).tab('show');
});

here is fiddle https://jsfiddle.net/5253gmpu/

Upvotes: 3

Related Questions