点击加载标签内容

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.