Twitter Bootstrap all tabs showing on page load

Question

I have the tabs code working but on page load all the tabs are displayed... Once I click the second tab only that second tab's content is displayed. I click back to the first tab and only the first tab's content is displayed. Refresh the page and you see all the content on this first tab until you repeat the above steps. Any ideas what I am missing?

<ul id="tab" class="nav nav-tabs">

<li class="active">
<a href="#firsttab" data-toggle="tab">firstab</a>
</li>
<li class="">
<a href="#secondtab" data-toggle="tab">secondtab</a>
</li>

</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="firsttab">


<p> Content of first tab </p>

</div>


<div class="tab-pane fade active in" id="secondtab">

<p> Content of second tab </p>
</div>
</div>

Answer 1

Both tabs can't have the class "active"