How do I get bootstrap tabs using RenderAction to load on demand

Question

I have multiple tabs within a page that load a partialview each simultaneously before anything shows. Some tabs take much longer to request than others so this delays loading of the entire page (or whatever tab the user actually wants to see). I've tried a bunch of different things with AJAX but all seem to require URL actions. I've seen similar questions asked before but not where the partialviews are called by RenderAction. How do I adapt using HTML.RenderAction to accomplish loading the tabs only when clicked?

<ul class="nav nav-pills centered"> 
     <li role="presentation" class="h4 active"><a href="#tab_facultyInfo" data-toggle="pill">Info</a></li>
     <li role="presentation" class="h4"><a href="#tab_facultySplits" data-toggle="pill">Splits</a></li>
     <li role="presentation" class="h4"><a href="#tab_facultyLeaves" data-toggle="pill">Leaves</a></li>
</ul>

<div class="tab-content tab-profile" id="tabs">
     <div class="tab-pane col-md-12 active fade in panel panel-default" id="tab_facultyInfo">
          @{Html.RenderAction("GetFacultyInfo", "Person", new { ID = ID });}
     </div>
     <div class="tab-pane col-md-12 active fade in panel panel-default" id="tab_facultySplits">
          @{Html.RenderAction("GetFacultySplits", "Person", new { ID = ID });}
     </div>
     <div class="tab-pane col-md-12 active fade in panel panel-default" id="tab_facultyInfo">
          @{Html.RenderAction("GetFacultyLeaves", "Person", new { ID = ID });}
     </div>
</div>

This is an excerpt from the controller:

public ActionResult GetFacultyInfo(string ID)
{
     ....
     return PartialView("Faculty/_Info");
}

Answer 1

Html.RenderAction is done on server side, It will render everything and you can only do show hide for those rendered information, if you want to load while clicking, you need to use client side function.

By using ajax load ( https://www.w3schools.com/jquery/jquery_ajax_load.asp ), which you can load your partial on the specific tab after clicking

sample of ajax load:

    $(selector).load(URL,data,callback);

The sample on your situation:

    var refreshCartUrl = "@Url.Action("GetFacultyInfo", "Controllername",new { id = id })";
    $('.tab_facultyInfo').load(refreshCartUrl);