We Keep Coding

How to show multiple tabbed content sections?

I have a website with three sections containing tabbed areas. I had an older version of this which worked fine, and showed all sections correctly at all times, however as I was changing to a new layout the tabbed sections stopped functioning, I then changed them to some new code and ended up preferring this instead. I then noticed that my content would only show in one section at a time, so some sections do not show up when the page is loaded, unless the tab link is active/clicked.
I recall finding a way to fix this before but I've looked online and can't find anything, and didn't save a version of my old JS code to refer back to. I was hoping someone could help me remember why this happens and how to fix it.
I should note that I have unique IDs for my code and I have not reflected this in my code, as I had that issue the first time round. The unique IDs do not help fix the issue unfortunately.
function openPage(pageName, elmnt, color) {
// Hide all elements with class="tabcontent" by default */
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Remove the background color of all tablinks/buttons
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
// Show the specific tab content
document.getElementById(pageName).style.display = "block";
// Add the specific color to the button used to open the tab content
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
h3 {
font-size: 15px;
word-spacing: 2px;
font-weight: 100;
letter-spacing: 1px;
text-transform: uppercase;
font-family: 'IBM Plex Mono', sans-serif;
}
h2 {
font-size: 40px;
color: white;
word-spacing: 2px;
margin-bottom: 15px;
font-weight: 700;
letter-spacing: 1px;
font-family: 'IBM Plex Serif', sans-serif;
}
p {
font-weight: 300;
font-size: 15px;
color: white;
text-align: justify;
line-height: 1.5;
}
.new-section__black {
padding: 5%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
position: relative;
transition: .5s ease;
background-color: #000;
height: 100%;
}
/* Style tab links */
.tablink {
float: left;
outline: none;
cursor: pointer;
margin: 0 1%;
padding: 5px 5px;
font-size: 17px;
width: 10%;
}
.link-black {
background-color: #fff;
color: #000;
border: 1px solid #000;
}
.link-white {
background-color: #000;
color: #fff;
}
.tablink:first-of-type {
margin-left: 5%;
}
.tablink:last-of-type {
margin-right: 5%;
}
.link-black:active,
.link-black:hover {
background-color: #000;
color: #fff;
box-shadow: 2px 2px 10px #555;
}
.link-white:active,
.link-white:hover {
background-color: #fff;
color: #000;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
width: 100%;
display: none;
margin-top: 1%;
padding: 100px 20px;
height: 100%;
}
.content-black {
color: #000;
}
.content-white {
color: #fff;
}
.tabcontent .col:first-of-type {
margin-left: 0;
}
#defaultOpen {
display: block;
}
<section class="card new-section__black new_section">
<button class="tablink link-white" onclick="openPage('Tab1', this)" id="defaultOpen">
<h3>Tab1</h3>
</button>
<button class="tablink link-white" onclick="openPage('Tab2', this)">
<h3>Tab2</h3>
</button>
<button class="tablink link-white" onclick="openPage('Tab3', this)">
<h3>Tab3</h3>
</button>
<button class="tablink link-white" onclick="openPage('Tab4', this)">
<h3>Tab4</h3>
</button>
<div id="Tab1" class="tabcontent content-white">
<div class="col span-2-of-2">
<h2>Tab1</h2>
<p>Text</p>
</div>
</div>
<div id="Tab2" class="tabcontent content-white">
<div class="col span-2-of-2">
<h2>Tab2</h2>
<p>Text</p>
</div>
</div>
<div id="Tab3" class="tabcontent content-white">
<div class="col span-2-of-2">
<h2>Tab3</h2>
<p>Text</p>
</div>
</div>
<div id="Tab4" class="tabcontent content-white">
<div class="col span-2-of-2">
<h2>Tab4</h2>
<p>Text</p>
</div>
</div>
</section>
Here is a CodePen example of what I have.

If you have multiple sets of "tabs" on the page, you need to scope your interactions to that specific <section>.
function openPage(pageName, elmnt, color) {
// Get the parent node, make all DOM selections based on this
var section = elmnt.parentElement;
// Hide all elements with class="tabcontent" by default */
var i, tabcontent, tablinks;
tabcontent = section.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Remove the background color of all tablinks/buttons
tablinks = section.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
// Show the specific tab content
section.getElementById(pageName).style.display = "block";
// Add the specific color to the button used to open the tab content
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
Also, you repeat element id values everywhere, this is not proper HTML and will lead to unexpected behavior. Each id should be unique. (you currently have multiple "defaultOpen" elements, you have multiple "Tab1", "Tab2", etc... rename them with no repeated values)

Rotate through simple vertical tab menu content on timer

I'm using w3schools's vertical tab menu to create a "How it works" menu like this: https://www.canva.com/graphs/
How can I loop through each tab to show the tabcontent div on a timer (while still letting users click the tabs and manually navigate)?
Thank you for any help!
The code from w3schools's vertical tabs:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}
/* Style the tab */
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}
/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
}
</style>
</head>
<body>
<h2>Vertical Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</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>
<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";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>

You could use setTimeout to create a timer that will move your tabs. Here is the updated code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}
/* Style the tab */
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}
/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
}
</style>
</head>
<body>
<h2>Vertical Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>
<div class="tab">
<button class="tablinks london" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
<button class="tablinks paris" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks tokyo" 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>
// Create a list of classes for each button
var cities = ["london", "paris", "tokyo"];
var cityIndex = 0;
// Time in miliseconds for the rotation
var rotationInterval = 2000;
// This will find the correct button, click on it, and move to the next one
function rotateCity(index) {
var currentCityButton = document.querySelector("." + cities[index]);
currentCityButton.click();
// Recursive call
setTimeout(function(){
if (cityIndex < 2) {
cityIndex++;
} else {
cityIndex = 0;
}
rotateCity(cityIndex);
}, rotationInterval);
}
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";
}
// Start rotation
rotateCity(cityIndex)
</script>
</body>
</html>
And this is a working example.

Multiple tabs on the same page

I'v tried to create this w3 code on a page works fine. But when I want to add it more then one (f.e. two or three tabs), the tabs doesn't work. What must I change in the script if i click the first tab of the second tab section; it doesn't want to open it in the first tab section.
The second I would like to know just styling it:
if I config the css that the tabcontent would be auto height, the tabs on the left side auto adjust to it (I tried to set all of them to auto height but both side auto heighted oneself different).
The code is that:
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();
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}
/* Style the tab */
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}
/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>Click on the buttons inside the tabbed menu:</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>
</body>
</html>

vertical navigation on hover change image

I am struggling to find a simple solution to create an div-navigation like this:
https://www.bueromoebel-experte.de/
The div with image on the right changes on hover of the left menu (and keeps the div, even if you go somewhere else with your mouse). But the left menu itself, when its clicked is linking to another page.
Must be sth like:
<ul>
<li> <a id="link1" href="example.de/abc" target="_blank">example 1</a></li>
<li> <a id="link2" href="example.de/def" target="_blank">example 2</a></li>
<li> <a id="link3" href="example.de/ghi" target="_blank">example 3</a></li>
</ul>
<div id="example1" class="hide"> Image, Text and Button</div>
<div id="example2" class="hide"> Image, Text and Button</div>
<div id="example3" class="hide"> Image, Text and Button</div>
CSS
.hide {
position: absolute;
}
#example1 {
z-index: 50;
}
#example3, #example2 {
z-index: 10;
}
JS
$("HOVEREDLINK").hover(function() {
$("HOVEREDLINK").css("z-index","70")
$("ALLOTHERIDS").css("z-index","50")
});
As a beginner I am not quite sure how to do so or if it is a good solution. I would be really gratefull if you guys could help me. Thank you very much!

Try something like this
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";
}
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}
/* Style the tab */
div.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}
/* Style the buttons inside the tab */
div.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
div.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
}
<!DOCTYPE html>
<html>
<body>
<div class="tab">
<button class="tablinks" onmouseover="openCity(event, 'London')" id="defaultOpen">London</button>
<button class="tablinks" onmouseover="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onmouseover="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
<h3>London</h3>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
</div>
<script>
document.getElementById("defaultOpen").onmouseover();
</script>
</body>
</html>

Javascript trying to implement history API

So, I am trying to store a history.go(-1) into a variable to use in a function, yet when I execute it, it gives the error
unable to read style.
I am using CSS for the animations and to show only one block of content at a time.
function openChoice(evt, choiceName) {
var i, tabcontent, tablinks, last;
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(choiceName).style.display = "block";
evt.currentTarget.className += " active";
history.pushState(null, null, choiceName.split('/').pop());
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
var bbac = history.go(-1);
body {
font-family: "Haveltica", sans-serif;
}
/* Style the tab */
div.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
choice {
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;
}
.tablinks {
background-color: #f44336;
border: none;
color: G;
font-weight: bold;
padding: 10px 22px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 8px;
}
/* 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 {
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
/* Fading effect takes 1 second */
}
#-webkit-keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="tab">
<button class="tablinks" onclick="openChoice(event, 'Slide1')" id="defaultOpen">Reset</button>
<button class="tablinks" onclick="openChoice(event, bbac)">Back</button>
</div>
<!-- Enter KBA info in the next line add tabcontent to class="tabcontent" of div-->
<div id="Slide1" class="tabcontent">
<h3>Title</h3>x
<p>
CONTENT OF SLIDE<br /><br />
<button class="tablinks" onclick="openChoice(event, 'Slide2')">Slide2</button> <br /><br />
<button class="tablinks" onclick="openChoice(event, 'Slide3')">Slide3</button> <br /><br />
</p>
</div>
<div id="Slide2" class="tabcontent">
<h3>Title 2</h3>
<p>
<h4>Having fun?</h4>
</p>
</div>
<div id="Slide3" class="tabcontent">
<h3>Title 3</h3>
<p>
<i>Image</i>
<img src="null" />
</p>
</div>
Here is an example of what I have so far:
http://kbadesigner.tvgesports.com/TEST%20KBA25.html
What I am trying to accomplish is the back button to return to the previous slide selected.
Thanks,

The actual error is not "unable to read style." It is:
null is not an object (evaluating 'document.getElementById(choiceName).style')
choiceName is supposed to be a DOM ID, but you've actually put this into it instead:
var bbac = history.go(-1);
...which naturally returns null when you try to call document.getElementById on it.
Here's a rewrite of your code which uses an array of IDs rather than the window history object. (You tagged the question with jquery so I've used that for convenience:)
var pastSlides = [];
var prevSlide = function() {
if (pastSlides.length == 0) return;
$('.tabcontent').hide();
$('#'+pastSlides.pop()).show();
}
var openSlide = function(slide) {
pastSlides.push($('.tabcontent:visible').attr("id"));
$('.tabcontent').hide();
$('#'+slide).show();
}
var resetSlides = function() {
pastSlides = [];
$('.tabcontent').hide();
$('#Slide1').show();
}
resetSlides();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab">
<button class="tablinks" onclick="resetSlides()" id="defaultOpen">Reset</button>
<button class="tablinks" onclick="prevSlide()">Back</button>
</div>
<div id="Slide1" class="tabcontent">
<h3>Title</h3>
<p>CONTENT OF SLIDE</p>
<button class="tablinks" onclick="openSlide('Slide2')">Two</button>
<button class="tablinks" onclick="openSlide('Slide3')">Three</button>
</div>
<div id="Slide2" class="tabcontent">
<h3>Title 2</h3>
<h4>Having fun?</h4>
<button class="tablinks" onclick="openSlide('Slide1')">One</button>
<button class="tablinks" onclick="openSlide('Slide3')">Three</button>
</div>
<div id="Slide3" class="tabcontent">
<h3>Title 3</h3>
<p><i>Image</i></p>
<button class="tablinks" onclick="openSlide('Slide1')">One</button>
<button class="tablinks" onclick="openSlide('Slide2')">Two</button>
</div>