A tabbed table that works with a place holder

[Mike]

I know of the Dynamically tabbed plugin and I tried endlessly to have it show up on a custom page only.
Nothing works. I went to the thread and tried some suggested things but it will not work.
So I found this code for tabs W3schools.com and would like someone to make a workable tab plugin with it.
Thank you in advance.
Something simple!



<!-- Tab links -->
<div class="tab">
 <button class="tablinks" onclick="openCity(event, 'London')">London</button>
 <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
 <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<!-- Tab content -->
<div id="London" class="tabcontent">
 
 <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
 
 <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent">

 <p>Tokyo is the capital of Japan.</p>
</div>
<style>
/* Style the tab */
.tab {
 overflow: hidden;
 border: 1px solid #ccc;
 background-color: #f1f1f1;
   border-bottom:none;
}

/* Style the buttons that are used to open the tab content */
.tab button {
 background-color: #fff;
   font-size:18px;
 float: left;
 border: none;
 outline: none;
 cursor: pointer;
 padding: 14px 16px;
 transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
 background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
   font-size:20px;
   font-weight:bold;
 background-color: red;
}

/* Style the tab content */
.tabcontent {
   background:red;
   color:#000;
   font-size:18px;
   font-weight:bold;
 display: none;
 padding: 6px 12px;
 border: 2px solid #fff;
   
 border-top: none;
}
</style>
<script>
function openCity(evt, cityName) {
 // Declare all variables
 var i, tabcontent, tablinks;

 // Get all elements with class="tabcontent" and hide them
 tabcontent = document.getElementsByClassName("tabcontent");
 for (i = 0; i < tabcontent.length; i++) {
   tabcontent[i].style.display = "none";
 }

 // Get all elements with class="tablinks" and remove the class "active"
 tablinks = document.getElementsByClassName("tablinks");
 for (i = 0; i < tablinks.length; i++) {
   tablinks[i].className = tablinks[i].className.replace(" active", "");
 }

 // Show the current tab, and add an "active" class to the button that opened the tab
 document.getElementById(cityName).style.display = "block";
 evt.currentTarget.className += " active";
}
</script>



[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

It would still probably be better to use dynamically tabbed table and add a code that hides it on the other pages