I have this bit of code - just tabbed panels with separate graphs in each tabbed panel. When I switch tabs the content is not loading correctly. The active state of the panel is not changing when I click another tab, can you help a brotha figure this out?
<div class="col-sm-6">
<!-- Tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#DailyIncome" role="tab" data-toggle="tab">Daily Income</a></li>
<li><a href="#YearlyIncome" role="tab" data-toggle="tab">Yearly Income</a></li>
<li><a href="#Clients" role="tab" data-toggle="tab">Clients</a></li>
<li><a href="#Orders" role="tab" data-toggle="tab">Orders</a></li>
</ul>
<!-- Content -->
<div class="tab-content">
<div class="tab-pane fade in active" id="DailyIncome">
<div id="DailyIncomeChart" class="DailyIncomePanel"></div>
</div>
<div class="tab-pane fade" id="YearlyIncome">
<div id="YearlyIncomeChart" class="YearlyIncomePanel"></div>
</div>
<div class="tab-pane fade" id="Clients"></div>
<div class="tab-pane fade" id="Orders"></div>
</div>
</div>
I answered my own question.
I simply added .active to every single tab-pane, and set the overflow to hidden in the CSS.