Problems loading a template file into a tab content section.

[RobMoore007]

I am a novice to coding but have build a tabbed section containing 10 tabs. This is the syntax for talent.liquid below.

I have also created a template called page.chef.liquid that contains basic html.

The issue I have is that when a user selects tab 'Chef' the page.chef.liquid does NOT load

Please can you help

<div class="tabbed-section">
<button class="tablinks" onclick="openTab(event, 'Actor')">Actor</button>
<button class="tablinks" onclick="openTab(event, 'Athlete')">Athlete</button>
<button class="tablinks" onclick="openTab(event, 'Author')">Author</button>
<button class="tablinks" onclick="openTab(event, 'Chef')">Chef</button>
<button class="tablinks" onclick="openTab(event, 'Comedian')">Comedian</button>
<button class="tablinks" onclick="openTab(event, 'DJ')">DJ</button>
<button class="tablinks" onclick="openTab(event, 'Influencer')">Influencer</button>
<button class="tablinks" onclick="openTab(event, 'Musician')">Musician</button>
<button class="tablinks" onclick="openTab(event, 'TVPersonality')">TV Personality</button>
<button class="tablinks" onclick="openTab(event, 'Vlogger')">Vlogger</button>

<div id="Actor" class="tab"></div>
<div id="Athlete" class="tab"></div>
<div id="Author" class="tab"></div>
<div id="Chef" class="tab"></div>
<div id="Comedian" class="tab"></div>
<div id="DJ" class="tab"></div>
<div id="Influencer" class="tab"></div>
<div id="Musician" class="tab"></div>
<div id="TVPersonality" class="tab"></div>
<div id="Vlogger" class="tab"></div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.shopify.com/s/assets/external/sections/scripts.min.js"></script>

<script>
// JavaScript function to open tabs
function openTab(evt, tabName) {
var i, tabcontent, tablinks;

tabcontent = document.getElementsByClassName("tab");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}

tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}

document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";

console.log(tabName); // Log the clicked tab name

// Update content based on tabName
var contentArea = document.getElementById(tabName);
contentArea.innerHTML = {% include 'page.' + tabName %}
}
</script>

</body>
</html>