title: Load content of the tabs to shorten the page loading
body: <p>I am using the jQuery UI tabs to embed different social widgets in each tab using JS and jQuery. I trying to rebuild script to shorten the page loading because for now jQuery UI tabs are loading all external JS files from all tabs at page start. I want to load content of active tab on click.</p>
  
  <p>Is this possible?</p>
  
  <p><a href="http://jsfiddle.net/JakubSkowronski/gn7k719u/33/" rel="nofollow">JSFIDDLE</a></p>
  
  <pre><code>$(document).ready(function() {
  
    //When page loads...
    $(".tab-content").hide(); //Hide all content
    $(".tabs tab-links a:first").addClass("active").show(); //Activate first tab
    $(".tabs .tab-content:first").show(); //Show first tab content
  
    //On Click Event
    $(".tabs .tab-links a").click(function() {
  
      $(".tabs .tab-content .tab").removeClass("active"); //Remove any "active" class
      $(this).addClass("active"); //Add "active" class to selected tab
      $(".tabs .tab-content .tab").hide(); //Hide all tab content
  
      var activeTab = $(this).attr("href"); //Find the href attribute value to identify the active tab + content
  
      if ($(activeTab).html() == '') {
        $.ajax({
          url: '/url/to/post',
          type: 'post',
          dataType: 'html',
          success: function(content) {
            $(activeTab).html(content);
          }
        });
      }
  
      $(activeTab).fadeIn(); //Fade in the active ID content
      return false;
    });
  
  });
  </code></pre>