We Keep Coding

How can I move content into tabs from elsewhere on the page using javascript?

I'm looking to move some content on a page, into a set of tabs higher on the page via javascript or any other means. I can't edit WHERE on the page this code exists, but I can set Pre/Post HTML on the fields and thus give it a class or an ID to mess with.
I built it out here to play with
If you don't want to go there, here's the code:
function openTab(evt, tabName) {
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(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
/* 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: #0090bf;
color: #fff;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
```
<!-- I can edit this section as needed. -->
<section class="panel panel-persondetails">
<div class="tab">
<button class="tablinks active" onclick="openTab(event, 'tab1')">Tab Name 1</button>
<button class="tablinks" onclick="openTab(event, 'tab2')">Tab Name 2</button>
<button class="tablinks" onclick="openTab(event, 'tab3')">Tab Name 3</button>
</div>
<div id="tab1" class="tabcontent" style="display: block;">
<div>
replace me with stuff 1
</div>
</div>
<div id="tab2" class="tabcontent">
<div>
replace me with stuff 2
</div>
</div>
<div id="tab3" class="tabcontent">
<div>
replace me with stuff 3
</div>
</div>
</section>
<!-- The following is elsewhere on the page and I can't move it. I can add pre/post HTML which is how I'd wrap it in a div and give it an ID or class to hopefully use js to show it in the tabs above instead. -->
<div id="content-tab-1">I want this in tab1.</div>
<div id="content-tab-2">I want this in tab2.</div>
<div id="content-tab-3">I want this in tab3.</div>
Where are the JS experts locked in quarantine and itching for a problem to solve? Thanks all!

You could do something like
var newContent = $("#content-tab-1]").detach();
$("#tab1").find("div").first().html(newContent);
Obviously you'll have to put that wherever you need it, and expand for tabs 2 and 3.

I edited your JSFiddle and I think that I did the thing that you were asking. Initially, the content below the tabs is set to the contents of the element that said, "I want this in tab1". After that, the program simply gets the corresponding content each time you switch to a different tab. Here's the link to the JSFiddle:
Tab Switching Demo
// START WITH THE CONTENT AS THE FIRST TAB ITEM
var contents = document.getElementById("content-tab1").innerHTML;
document.getElementById("tabcontent").innerHTML = contents;
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
// MAKE ALL OF THE TABS LOOK INACTIVE
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
//CHANGE THE DISPLAY AND CSS PROPERTIES OF THE CLICKED TAB
var contents = document.getElementById("content-" + tabName).innerHTML;
console.log(contents);
document.getElementById("tabcontent").innerHTML = contents;
evt.currentTarget.className += " active";
console.log(evt.currentTarget.id);
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
/* 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: #0090bf;
color: #fff;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
<!-- I can edit this section as needed. -->
<section class="panel panel-persondetails">
<div class="tab">
<button id="tab1" class="tablinks active" onclick="openTab(event, 'tab1')">Tab Name 1</button>
<button id="tab2" class="tablinks" onclick="openTab(event, 'tab2')">Tab Name 2</button>
<button id="tab3" class="tablinks" onclick="openTab(event, 'tab3')">Tab Name 3</button>
</div>
<div class="tabcontent" style="display: block;">
<div id="tabcontent">
replace me with stuff 1
</div>
</div>
</section>
<br>
<!-- The following is elsewhere on the page and I can't move it. I can add pre/post HTML which is how I'd wrap it in a div and give it an ID or class to hopefully use js to show it in the tabs above instead. -->
<div id="content-tab1">I want this in tab1.</div>
<div id="content-tab2">I want this in tab2.</div>
<div id="content-tab3">I want this in tab3.</div>

var tabcontent = document.getElementsByClassName("tabcontent");
var tablinks = document.getElementsByClassName("tablinks");
insertToTab(1);
console.log('tablinks ', tablinks);
for (let i = 0; i < tablinks.length; i++) {
tablinks[i].addEventListener('click', bindClick2(i))
}
function bindClick2(i) {
return function() {
insertToTab(i + 1);
for (j = 0; j < tabcontent.length; j++) {
tabcontent[j].style.display = "none";
}
for (j = 0; j < tablinks.length; j++) {
tablinks[j].className = tablinks[j].className.replace(" active", "");
}
var tabName = 'tab' + (+i + 1);
document.getElementById(tabName).style.display = "block";
this.className += " active";
}
}
function insertToTab(i) {
var currContentTab = document.getElementById("content-tab-" + i);
var currTabcontent = document.getElementById("tab" + i)
currTabcontent.innerText = currContentTab.innerText;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
/* 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: #0090bf;
color: #fff;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
<section class="panel panel-persondetails">
<div class="tab">
<button class="tablinks active">Tab Name 1</button>
<button class="tablinks">Tab Name 2</button>
<button class="tablinks">Tab Name 3</button>
</div>
<div id="tab1" class="tabcontent" style="display: block;">
<div>
replace me with stuff 1
</div>
</div>
<div id="tab2" class="tabcontent">
<div>
replace me with stuff 2
</div>
</div>
<div id="tab3" class="tabcontent">
<div>
replace me with stuff 3
</div>
</div>
</section>
<div id="content-tab-1">I want this in tab1.</div>
<div id="content-tab-2">I want this in tab2.</div>
<div id="content-tab-3">I want this in tab3.</div>

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>

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>

by default it's blank I want first tab as default

as you can see when the page reloads the section under these tabs are empty (maybe using wrong word) need to click this to see content
All I want is when page the loads content on the first tab show by default
Click Here
hope you undersatnd me

Do these 2 things to achieve the desired result:
1.
Use style="display:block;" on the first tab because the logic of your javascript code works like this.
So on page load the 1st tab content will alwyas be visible and on tab change it will work accordingly.
Add class="tablinks active" to the first tab link to make it active.
<!DOCTYPE html>
<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;
}
</style>
</head>
<body>
<p>Click on the buttons inside the tabbed menu:</p>
<div class="tab">
<button class="tablinks active" 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" style="display:block;">
<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>

All of your .tabcontent tabs have their display property set to none. Change the display property of your first tab to block and it will show by default.

You can use jquery for this and then put this in script
$('.tablinks').eq(0).click();
Working example