Question: I want to add tabs on my website which load when users click on them not when the page is loading. When I open the website the whole tab content load at once. I want to load the contents of another tab when users like on them something like Youtube. When you open a channel on your you got tabs like videos, playlist, community, etc. They load when users click on them. I tried to find so many things on the internet cant find the solution. I am a rookie in this. Can someone help me?

Answer: 
There are multiple ways to solve this:
--------------------------------------

From the top of my head, here are a few ways: 

1. Use bootstrap toggleable tabs. This would be the easiest solution. However all the code would live on the same page. (Source: <https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp>) asdsad
2. Another way to be use a JavaScript library or framework meant for a Single Page application like React/Vue/Angular and use some routing. But this would be overkill if its simply a few tabs
3. Build it yourself with some JavaScript AJAX calls. Place the data in some JSON file. Onclick of each button/tab fetch it using AJAX/fetch or something of that sort and render the content.

Here is how you use the bootstrap solution:
-------------------------------------------

```
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

```
What you aim to achieve is called lazy-loading. Basically you load your main content and avoid loading some content until it's needed. To achieve this, you will have to generate the HTML for what you want to load at once on the server and some containers for things that you aim to lazy-load. Let's assume that the contents for your tabs are wrapped into some containers, like:

```
<div class="lazy-load-container" id="your-api-function">
</div>

```

and you have some tabs, like

```
<span onclick="yourJSFunctionToRequestTheContent('your-api-function')">Lazy Load</span>

```

so, you need to implement your `yourJSFunctionToRequestTheContent`, like

```
function yourJSFunctionToRequestTheContent(functionName) {
    //Request function name
    //which will return the HTML you will need in the div having the name passed as functionName
    //in the callback set the innerHTML of your div to the HTML you have received as an answer
}

```