bootstrap tabs stops working after working - twitter-bootstrap-3

Question

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">2011</li></div>
<div class="col-sm-3"><li role="presentation">2013</li></div>
<div class="col-sm-3"><li role="presentation">2014</li></div>
<div class="col-sm-3"><li role="presentation">2016</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')
})

Answer 1

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/