I have 10 tabs on my project, each of them will fetch some values from API using PHP.
It takes 10-15 seconds to load the page every time (since it updates the values for all 10 Tabs)
How do i load content only after switching a tab?
Load TAB1 at start, then only after clicking TAB2 or TAB3 then load their content, but do not load them at start
Example: https://jsfiddle.net/t52mwLoc/
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Default Tab</h4>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item"> <a class="nav-link active show" data-toggle="tab" href="#tab1" role="tab" aria-selected="true">TAB1</a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab2" role="tab" aria-selected="false"> TAB2</a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab3" role="tab" aria-selected="false"><span class="hidden-sm-up"> TAB3</a> </li>
</ul>
<!-- Tabs -->
<div class="tab-content tabcontent-border">
<div class="tab-pane active show" id="tab1" role="tabpanel">
<div class="p-20">
Load this content... [TAB1]
</div>
</div>
<div class="tab-pane p-20" id="tab2" role="tabpanel">some PHP... Load this ONLY after clicking [TAB2]</div>
<div class="tab-pane p-20" id="tab3" role="tabpanel">some PHP... Load this ONLY after clicking [TAB3]</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>Some simple thing you can do is this. live example here
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function initialLoad(){
$('#loader').load("page1.php");
}
</script>
</head>
<body onload="initialLoad()">
Click on buttons to load different pages <br/>
<button style="margin-left: 20px" class="btn btn-primary" onclick="load(1)"> Page 1 </button>
<button style="margin-left: 20px" class="btn btn-primary" onclick="load(2)"> Page 2 </button>
<button style="margin-left: 20px" class="btn btn-primary" onclick="load(3)"> Page 3 </button>
<button style="margin-left: 20px" class="btn btn-primary" onclick="load(4)"> Page 4 </button>
<button style="margin-left: 20px" class="btn btn-primary" onclick="load(5)"> Page 5 </button><br/><br/>
<div class="load" id="loader">
</div>
<h3>You can check the network tab to see which page is getting loaded</h3>
<script>
function load(page){
var thePage = "page"+page+".php"
$('#loader').load(thePage);//assuming u have page1.php page2.php like this
}
</script>
</body>
</html>
For any queries comment down.