Using the Twitter Bootstrap framework, I'm attempting to have a section of content appear conditionally using the tabs feature: http://getbootstrap.com/javascript/#tabs
The issue I'm having is that the content in the div classed as "tab-pane-active" is always appearing, regardless of the tab selected. (When other tabs are selected, their content appears below the content in this div)
Code for the tabs
<ul class="nav nav-tabs" role="tablist" style="margin-top:30px; margin-left:250px;">
<li role="presentation" class="active"><a href="#t1" aria-controls="t1" role="tab" data-toggle="tab">Product Information</a></li>
<li role="presentation"><a href="#t2" aria-controls="t2" role="tab" data-toggle="tab">Shipping Information</a></li>
<li role="presentation"><a href="#t3" aria-controls="t3" role="tab" data-toggle="tab">Usage Instructions</a></li>
<li role="presentation"><a href="#t4" aria-controls="t4" role="tab" data-toggle="tab">Testimonials</a></li>
<li role="presentation"><a href="#t5" aria-controls="t5" role="tab" data-toggle="tab">FAQ</a></li>
</ul>
Code for the content
<div class="tab-content">
<div role="tabpanel" class="tab-pane-active" id="t1">
<h3>Product Information</h3>
<p>Product information here
</div>
<div role="tabpanel" class="tab-pane" id="t2">
<h3>Shipping Information</h3>
<p>Shipping info here</p>
</div>
<div role="tabpanel" class="tab-pane" id="t3">
<h3>Using Instructions</h3>
<p>Usage info here</p>
</div>
<div role="tabpanel" class="tab-pane" id="t4">
<h3>Testimonials</h3>
<p>Testimonials here</p>
</div>
<div role="tabpanel" class="tab-pane" id="t5">
<h3>FAQ</h3>
<p>FAQ here</p>
</div>
</div>
If I change the class "tab-pane-active" to "tab-pane", the tabs work as intended however the content in the first div doesn't appear by default as it should.
I've used this feature successfully elsewhere on my website with no differences in syntax, and can't determine why it isn't working here.
