Develop Reference

Javascript - Pause video when changing to another tab (on the same page)

So I have 3 tabs set up pretty much exactly like this - https://www.w3schools.com/howto/howto_js_tabs.asp - but the content under each tab is a different video (HTML). My problem is that after changing tabs, the video/audio from the previous tab continues to play - unless I pause the video prior to switching tabs. I've tried a few of the different solutions I've seen for problems similar to this, but still can't find a solution that works on my page.
Here is the HTML I have -
<!-- Tab links -->
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'BEE')" id="defaultOpen">BEE</button>
<button class="tablinks" onclick="openCity(event, 'CRAB')">CRAB</button>
<button class="tablinks" onclick="openCity(event, 'CROW')">CROW</button>
</div>
<!-- Tab content -->
<div id="BEE" class="tabcontent">
<div class="video">
<video width="852" height="480" controls>
<source src="bee.mov" type="video/mp4">
</video>
</div>
</div>
<div id="CRAB" class="tabcontent">
<div class="video">
<video width="852" height="480" controls>
<source src="crab.mov" type="video/mp4">
</video>
</div>
</div>
<div id="CROW" class="tabcontent">
<div class="video">
<video width="852" height="480" controls>
<source src="crow.mov" type="video/mp4">
</video>
</div>
</div>
Here are some of the different solutions I've tried -
#1 - The main one I keep coming back to - Pause/stop videos into tabs when I clicked on a tab
#2 - How to pause a video when another video's play button is clicked
#3 - I've tried to see if there's a way I could switch the space bar to clicking anywhere on this one - https://teamtreehouse.com/community/hi-how-can-i-make-the-video-startstop-by-clicking-anywhere-on-the-video-icon-instead-of-targeting-the-play-button
I'm still very new to JS so any help or suggestions are very much appreciated! Thank you!

You can pause all videos when one of the tabs is clicked:
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
tabcontent[i].querySelector("video").pause();
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
body {
font-family: Arial;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
.tabcontent .video {
width: 100%;
}
<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>
<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>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
<video controls>
<source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4"/>
</video>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
<video controls>
<source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4"/>
</video>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
<video controls>
<source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4"/>
</video>
</div>

Why For..in(loop) alway breaks the function where it stay in?

Haizz.
Hello guys..
I'm learning Web Dev in: https://www.w3schools.com/.
I did a very simple homework here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs
```
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body>
<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>
<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>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
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(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
```
But.... When I try to exchange the traditional for-loop to for..in loop. It not work?
Ex.
for (i in tabcontent) {
tabcontent[i].style.display = "none";
}
After many time I try to make it work. I've found that all statement follow the first for..in loop will be skip !!!????
It mean the Function will auto-break after a for..in loop. The first for..in loop work as normal, but the rest statement after it is simply skip. The Function break at this point?
If anyone knew this problem please help me to understand it. X__X

The "auto-break" you're seeing is an uncaught exception breaking execution –
you should have your browser's console open to see any errors that occur and are uncaught.
That change yields an
Uncaught TypeError: Cannot set property 'display' of undefined
at openCity (<anonymous>:6:33)
at HTMLButtonElement.onclick (tryit.asp?filename=tryhow_js_tabs:1)
since for..in loops over properties of objects, not array elements as you imagine, and i ends up (as evidenced by console.log(i)) being 0, 1, 2, and then finally length, and tabcontent.length has no style property, so the equivalent of
tabcontent.length.style.display = ...
naturally fails.

You can go with the for in loop. The loop will give you indexes but because you have not converted it to an array you get some extra (unwanted properties) hence the error.
The key is to make the conversion, after that you are safe with the for in loop:
let tabContent = Array.from(document.getElementsByClassName("tabcontent"))
Example proof: https://jsfiddle.net/sqfgb0k6/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body>
<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>
<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>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<script>
function openCity(evt, cityName) {
let i, tablinks
let tabContent = Array.from(document.getElementsByClassName("tabcontent"))
for (let i in tabContent) {
tabContent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (let i in tabContent) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>

Multiple tab sections with active tab issue

I created multiple tab classes to perform differently, but after all the changes I still seem to be facing issues with active tab function, like in the version as I select other tabs, the previous tabs don't hide, they just keep showing one under the other.
I have been trying to find a solution, but I have been stuck here for days.
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
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(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent2");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks2");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen2").click();
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent3");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks3");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen3").click();
body {
font-family: Arial;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
.tabcontent2 {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
.tabcontent3 {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>In this example, we use JavaScript to "click" on the London button, to open the tab on page load.</p>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<br><br><br>
<div class="tab">
<button class="tablinks2" onclick="openCity(event, 'Russia')" id="defaultOpen2">Russia</button>
<button class="tablinks2" onclick="openCity(event, 'Bombay')">Bombay </button>
<button class="tablinks2" onclick="openCity(event, 'Tibet')">Tibet</button>
</div>
<div id="Russia" class="tabcontent2">
<h3>Russia</h3>
<p>Russia is the capital city of England.</p>
</div>
<div id="Bombay" class="tabcontent2">
<h3>Bombay</h3>
<p>Bombay is the capital of France.</p>
</div>
<div id="Tibet" class="tabcontent2">
<h3>Tibet</h3>
<p>Tibet is the capital of Japan.</p>
</div>
<br><br><br>
<div class="tab">
<button class="tablinks3" onclick="openCity(event, 'Rome')" id="defaultOpen3">Rome</button>
<button class="tablinks3" onclick="openCity(event, 'Hungry')">Hungry </button>
<button class="tablinks3" onclick="openCity(event, 'Tutupani')">Tutupani</button>
</div>
<div id="Rome" class="tabcontent3">
<h3>Rome</h3>
<p>Rome is the capital city of England.</p>
</div>
<div id="Hungry" class="tabcontent3">
<h3>Hungry</h3>
<p>Hungry is the capital of France.</p>
</div>
<div id="Tutupani" class="tabcontent3">
<h3>Tutupani</h3>
<p>Tutupani is the capital of Japan.</p>
</div>
</body>
</html>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="tab">
<button class="tablinks active" data="London">London</button>
<button class="tablinks" data="Paris">Paris</button>
<button class="tablinks" data="Tokyo">Tokyo</button>
</div>
<div class="tabcontent">
<div id="London" class="content active">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="content">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="content">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</div>
</body>
</html>
body {
font-family: Arial;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
border: 1px solid #ccc;
border-top: none;
}
.content {
padding: 6px 12px;
display: none
}
.content.active {
display: block;
}
let tabs = document.querySelectorAll('.tablinks');
let tabContents = document.querySelectorAll('.content');
tabs.forEach(item => {
item.addEventListener('click', event => {
tabs.forEach(btn => btn.classList.remove('active'))
event.target.classList.add('active')
tabContents.forEach(tab => tab.classList.remove('active'))
document.querySelector("#"+event.target.getAttribute('data')).classList.add('active')
})
})

Make tabs inside tabs with JavaScript without jQuery

I have a javascript function to have tabs. And now I want to have tabs within one of the tabs. But everytime I click on one of the tabs within that specific tab, everything disapears. It is because the javascript function I use sets the style.display to none.
What I want is that when inside POP is clicked on doel1 or doel2 or doel3 that the style.display of POP stays active.
Here is my javascript function (it's from w3school.com):
function openTab(evt, openTab) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
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(openTab).style.display = "block";
evt.currentTarget.className += " active";
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'bla')">bla</button>
<button class="tablinks" onclick="openTab(event, 'blabla')">blabla</button>
<button class="tablinks" onclick="openTab(event, 'pop')">POP</button>
</div>
<div id="bla" class="tabcontent">
<h2>bla</h2>
<table>
<tr>
<td>My stuff that works :)</td>
</tr>
</table>
</div>
<div id="blabla" class="tabcontent">
<h3>blabla</h3>
<table>
<tr>
<td>My stuff that works ;)</td>
</tr>
</table>
</div>
<div id="pop" class="tabcontent">
<h1>POP</h1>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'doel1')">Doel 1</button>
<button class="tablinks" onclick="openTab(event, 'doel2')">Doel 2</button>
<button class="tablinks" onclick="openTab(event, 'doel3')">Doel 3</button>
</div>
<div id="doel1" class="tabcontent">
My stuff that doesn't show when I want :(
</div>
</div>

See if this fits you as a solution, what I have done is added another parameter to the function that indicates if it is a sub tab. If it is, keep parent active and make the child active as well
function openTab(evt, openTab, subTab) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
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", "");
}
if(subTab) {
var parent = evt.currentTarget.closest('.tabcontent');
parent.style.display = "block";
parent.className += " active";
}
document.getElementById(openTab).style.display = "block";
evt.currentTarget.className += " active";
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'bla')">bla</button>
<button class="tablinks" onclick="openTab(event, 'blabla')">blabla</button>
<button class="tablinks" onclick="openTab(event, 'pop')">POP</button>
</div>
<div id="bla" class="tabcontent">
<h2>bla</h2>
<table>
<tr><td>My stuff that works :)</td></tr>
</table>
</div>
<div id="blabla" class="tabcontent">
<h3>blabla</h3>
<table>
<tr><td>My stuff that works ;)</td></tr>
</table>
</div>
<div id="pop" class="tabcontent">
<h1>POP</h1>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'doel1',true)">Doel 1</button>
<button class="tablinks" onclick="openTab(event, 'doel2', true)">Doel 2</button>
<button class="tablinks" onclick="openTab(event, 'doel3', true)">Doel 3</button>
</div>
<div id="doel1" class="tabcontent">
My stuff that doesn't show when I want :(
</div>
<div id="doel2" class="tabcontent">
My stuff doel2
</div>
<div id="doel3" class="tabcontent">
My stuff doel3
</div>
</div>

I've had a stab at it here, the basic change is targeting the tabs you want to alter:
html:
<div class="tabs">
<ul>
<li>
<button class="tablink active" onclick="openTab(event, 'tab1', 'parent')">
Tab 1
</button>
</li>
<li>
<button class="tablink" onclick="openTab(event, 'tab2', 'parent')">
Tab 2
</button>
</li>
<li>
<button class="tablink" onclick="openTab(event, 'tab3', 'parent')">
Tab 3
</button>
</li>
</ul>
</div>
<div id="tab1" class="parent active">
<h2>Tab 1</h2>
</div>
<div id="tab2" class="parent">
<h2>Tab 2</h2>
</div>
<div id="tab3" class="parent">
<h2>Tab 3</h2>
<div class="tabs">
<ul>
<li>
<button class="subtablink active" onclick="openTab(event, 'tab1', 'child')">
Tab 3a
</button>
</li>
<li>
<button class="subtablink" onclick="openTab(event, 'tab2', 'child')">
Tab 3b
</button>
</li>
</ul>
</div>
<div id="tab1" class="child active">
<h2>Tab 3a</h2>
</div>
<div id="tab2" class="child">
<h2>Tab 3b</h2>
</div>
</div>
CSS:
.parent, .child {
display:none;
}
.parent.active, .child.active {
display: block;
}
.tablink.active, .subtablink.active {
background: red;
}
Javascript:
function openTab(event, tab, set) {
// Hide all tabs in scope
const className = '.' + set;
document.querySelectorAll(className).forEach(function(item) {
item.className = set;
});
// Show selected tab
const fullPath = className + '#' + tab;
document.querySelector(fullPath).classList.add('active');
// Set Tab to active (and deactivate others)
const siblingClass = event.target.className;
document.querySelectorAll('.' + siblingClass).forEach(function(item) {
item.classList.remove('active');
});
event.target.classList.add('active');
}
I've just added the basic of styling here. Here it is in action: https://codepen.io/anon/pen/VyzWPQ
Just for clarity, the tab navigation links have their own classes (tablink & subtablink) depending on their scope, you can of course name them whatever you want, you'll need to if you have sub tabs in another parent tab. The javascript uses this to unset the active class on siblings when a button is clicked.

function openTab(evt, openTab, subTab) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
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", "");
}
if(subTab) {
var parent = evt.currentTarget.closest('.tabcontent');
parent.style.display = "block";
parent.className += " active";
}
document.getElementById(openTab).style.display = "block";
evt.currentTarget.className += " active";
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'bla')">bla</button>
<button class="tablinks" onclick="openTab(event, 'blabla')">blabla</button>
<button class="tablinks" onclick="openTab(event, 'pop')">POP</button>
</div>
<div id="bla" class="tabcontent">
<h2>bla</h2>
<table>
<tr><td>My stuff that works :)</td></tr>
</table>
</div>
<div id="blabla" class="tabcontent">
<h3>blabla</h3>
<table>
<tr><td>My stuff that works ;)</td></tr>
</table>
</div>
<div id="pop" class="tabcontent">
<h1>POP</h1>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'doel1',true)">Doel 1</button>
<button class="tablinks" onclick="openTab(event, 'doel2', true)">Doel 2</button>
<button class="tablinks" onclick="openTab(event, 'doel3', true)">Doel 3</button>
</div>
<div id="doel1" class="tabcontent">
My stuff that doesn't show when I want :(
</div>
<div id="doel2" class="tabcontent">
My stuff doel2
</div>
<div id="doel3" class="tabcontent">
My stuff doel3
</div>
</div>
Thnx :)

JavaScript - messages.load.failed - {"error":"unknown error occurred during Hermes Messages initialization"}

Any Idea on how to fix this error message?
messages.load.failed - {"error":"unknown error occurred during Hermes Messages initialization"}

<html>
<head>
<style>
body {font-family: "Lato", sans-serif;}
/* Style the tab */
div.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
div.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
div.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
tabcontent.iframe {
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 0;
left: 0;
}
iframe {
display: block;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script>
function openTab(evt, tabName) {
console.log(tabName );
// 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");
console.log("tab link size:: " + tablinks.length);
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(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("EPSButton").click();
</script>
<div class="tab">
<!-- TAB BUTTONS HERE -->
<button class="tablinks" onclick="openTab(event, 'EPS')" id="EPSButton">EPS</button>
<button class="tablinks" onclick="openTab(event, 'AMP')" id="AMPButton">AMP</button>
<button class="tablinks" onclick="openTab(event, 'InternetON')" id="InternetONButton">InternetON</button>
<button class="tablinks" onclick="openTab(event, 'TOMI')" id="TOMIButton">TOMI</button>
<button class="tablinks" onclick="openTab(event, 'Confluence')" id="ConfluenceButton">Confluence</button>
<button class="tablinks" onclick="openTab(event, 'Broadwork')" id="BroadworkButton">Broadwork</button>
<button class="tablinks" onclick="openTab(event, 'Frontier')" id="FrontierButton">Frontier</button>
<button class="tablinks" onclick="openTab(event, 'Optus')" id="OptusButton">Optus</button>
<button class="tablinks" onclick="openTab(event, 'AirWatch')" id="AirWatchButton">Airwatch</button>
<button class="tablinks" onclick="openTab(event, 'InterfaceIT')" id="InterfaceITButton">InterfaceIT</button>
<button class="tablinks" onclick="openTab(event, 'TinyURL')" id="TinyURLButton">TinyURL</button>
<button class="tablinks" onclick="openTab(event, 'Radius')" id="RadiusButton">Radius</button>
<!-- TAB BUTTONS HERE -->
</div>
<!-- iFRAMES HERE -->
<div id="EPS" class="tabcontent">
<iframe src="https://portal.emapta.com/"></iframe>
</div>
<div id="AMP" class="tabcontent">
<iframe src="https://management.anex.com.au/Customer/ByService/"></iframe>
</div>
<div id="InternetON" class="tabcontent">
<iframe src="https://management.anex.com.au/ION/Dashboard"></iframe>
</div>
<div id="TOMI" class="tabcontent">
<iframe src="https://management.anex.com.au/TOM/Dashboard"></iframe>
</div>
<div id="Confluence" class="tabcontent">
<iframe src="https://acurus.atlassian.net"></iframe>
</div>
<div id="Broadwork" class="tabcontent">
<iframe src="https://www.hostedclient.com.au/callcenter/"></iframe>
</div>
<div id="Frontier" class="tabcontent">
<iframe src="https://frontier.aapt.com.au/"></iframe>
</div>
<div id="Optus" class="tabcontent">
<iframe src="https://www.optus.com.au/wholesalenet/"></iframe>
</div>
<div id="AirWatch" class="tabcontent">
<iframe src="http://cn500.airwatchpor­­tals.com"></iframe>
</div>
<div id="InterfaceIT" class="tabcontent">
<iframe src="https://console.interfaceit.com"></iframe>
</div>
<div id="TinyURL" class="tabcontent">
<iframe src="https://tinyurl.com"></iframe>
</div>
<div id="Radius" class="tabcontent">
<iframe src="http://URL"></iframe>
</div>
<!-- iFRAMES HERE -->
</body>