Twitter Bootstrap Tab Content Always Showing

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 target="_blank" rel="nofollow noreferrer" href="#t1" aria-controls="t1" role="tab" data-toggle="tab">Product Information</a></li>
 <li role="presentation"><a target="_blank" rel="nofollow noreferrer" href="#t2" aria-controls="t2" role="tab" data-toggle="tab">Shipping Information</a></li>
 <li role="presentation"><a target="_blank" rel="nofollow noreferrer" href="#t3" aria-controls="t3" role="tab" data-toggle="tab">Usage Instructions</a></li>
 <li role="presentation"><a target="_blank" rel="nofollow noreferrer" href="#t4" aria-controls="t4" role="tab" data-toggle="tab">Testimonials</a></li>
 <li role="presentation"><a target="_blank" rel="nofollow noreferrer" 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.

This is because the class is tab-pane active your div has the class of tab-pane-active

<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>