I have attempted to take bits and pieces from other sources but I am unable to get the desired effect. I have multiple tabs which are currently pre-loaded, the content they are loading to be specific is a number of RSS feeds, as I have added more tabs the page has gradually taken longer to load, naturally.. I am at the point where I need to load the tabs content on click/trigger. What would be the best way to achieve this?
HTML
<div class="header">
<h4 class="title">Header</h4>
<p class="category">Some tagline here</p>
</div>
<div class="content content-full-width">
<ul role="tablist" class="nav nav-tabs">
<li role="presentation" class="active">
<a href="#us" data-toggle="tab" aria-expanded="true">USA</a>
</li>
<li class="">
<a href="#uk" data-toggle="tab" aria-expanded="false">UK</a>
</li>
<li class="">
<a href="#au" data-toggle="tab" aria-expanded="false">AU</a>
</li>
<li class="">
<a href="#ca" data-toggle="tab" aria-expanded="false">CA</a>
</li>
<li class="">
<a href="#nz" data-toggle="tab" aria-expanded="false">NZ</a>
</li>
</ul>
<div class="tab-content">
</br>
<div id="us" class="tab-pane active">
- Content Here -
</div>
<div id="uk" class="tab-pane">
- Content Here -
</div>
<div id="au" class="tab-pane">
- Content Here -
</div>
<div id="ca" class="tab-pane">
- Content Here -
</div>
<div id="nz" class="tab-pane">
- Content Here -
</div>
</div>
</div>
JSFiddle
https://jsfiddle.net/qvussf6t/1/
Thanks.
