We Keep Coding

When click button change text in code tag

I'm trying to make a code box you can see in image . My question is how can ı change code in code tag when click another language button ?
<div class="container">
<div class="row align-items-center py-1">
<div class="embedcontainer">
<button class="language">JavaScript</button>
<button class="language">PHP</button>
<div class="code-wrapper">
<pre>
<code id="code">
function fibonacci(num)<br/> {<br/> var num1=0;<br/> var num2=1;<br/> var sum;<br/> var i=0;<br/> for (i = 0; i < num; i++)<br/> {<br/> sum=num1+num2;<br/> num1=num2;<br/> num2=sum;<br/> }<br/> return num2;<br/> }<br/> <br/> console.log(fibonacci(155));
</pre>
<button id="copy-button">Copy</button>
</div>
<span id="copy-success">Code copied!</span>
</div>
</div>
</div>

You have to put some Javascript code. If click on JavaScript tab, display none PHP tab data and if click on PHP tab, display none the Javascript tab data.
Here down is code:
function openTab(evt, languageName) {
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(languageName).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="container">
<div class="row align-items-center py-1">
<div class="embedcontainer">
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'JavaScript')">JavaScript</button>
<button class="tablinks" onclick="openTab(event, 'PHP')">PHP</button>
</div>
<div id="JavaScript" class="tabcontent">
<pre>
<code id="code">
JavaScript code
</code>
</pre>
<button id="copy-button">Copy</button>
</div>
<div id="PHP" class="tabcontent">
<pre>
<code id="code">
PHP code
</code>
</pre>
<button id="copy-button">Copy</button>
</div>
</div>
</div>
</div>

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>

Force div inside tab navigation to appear on top of all other page content

I'm working with templates, so I can only edit so much of the environment. I have a tabbed navigation set up. Within one of the tabs, I have a div that I want to have a fixed position that is outside/on top of everything else on the page.
This isn't the actual code I'm working with, but it's similar enough that I can use it as an example. The "outsidediv" div is placed in the "London" div. But I want to make it so you see outsidediv even if you click into the Paris or Tokyo tabs.
I've tried using z-index and every kind of position property I can think of to get this to work. I cannot move the outsidediv from where it is.
.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;
}
#outsidediv {
position: fixed;
top: 80px;
right: 50px;
background: pink;
}
<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 id="outsidediv">This div should appear no matter which tab is selected.</div>
</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>

I don't know that there is any other way to do this other than to move the div so that it's outside of the tab, and give it a very high z-index because once you hide a tab with display:none the entire tab (and its descendants) won't be rendered.
If you can't modify the HTML template structure, you could use JavaScript to move it with this one line:
document.body.appendChild(document.getElementById("outsidediv"));
I've also modified/updated your existing JavaScript code so that you aren't using .getElementsByClassName() or using inline HTML event attributes, which makes the code much more efficient and more in line with modern development methodologies. See the comments in the code for details.
/* Just add this class when you want to hide something
and remove when you want to show */
.hidden { display:none; }
.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 {
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
#outsidediv {
position: fixed;
z-index:9999;
top: 80px;
right: 50px;
background: pink;
}
<div class="tab">
<!-- Don't use inline HTML event attributes. Do your JavaScript in JavaScript-->
<button class="tablinks">London</button>
<button class="tablinks">Paris</button>
<button class="tablinks">Tokyo</button>
</div>
<div id="London" class="tabcontent hidden">
<h3>London</h3>
<p>London is the capital city of England.</p>
<div id="outsidediv">This div should appear no matter which tab is selected.</div>
</div>
<div id="Paris" class="tabcontent hidden">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent hidden">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<script>
// Move the div that should stay on top to just after the tab divs
document.body.appendChild(document.getElementById("outsidediv"));
// Just set your event up at the parent of the buttons
// and use event delegation to leverage event bubbling
document.querySelector(".tab").addEventListener("click", openCity);
function openCity(event) {
// Never, never, never use `getElementsByClassName()`
// and instead, use `.querySelectorAll()`. You can
// then loop through the resulting collection with
// `.forEach()`, which makes looping without indexes
// possible
// Hide all the tab conttent
document.querySelectorAll(".tabcontent").forEach(function(tab){
// Avoid inline styles when possible and just apply/remove classes
tab.classList.add("hidden");
});
// Remove the active tab
document.querySelectorAll(".tablinks").forEach(function(tabLink){
tabLink.classList.remove("active");
});
// Loop over the content again
document.querySelectorAll(".tabcontent").forEach(function(tab){
// If the text of the clicked button matches the text of the tab header...
if(event.target.textContent === tab.querySelector("h3").textContent){
tab.classList.remove("hidden"); // Unhide the tabcontent
event.target.classList.add("active"); // Make the tab active
}
});
}
</script>

You can make an additional function to add the outsidediv. Before adding the element, first check if it exists on the page and if so remove it, then add it to the current active tab element.
Check below:
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
var div = document.getElementById("outsidediv");
if(div !== null) { // if outsidediv exists on the page, remove it
div.remove();
}
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", "");
}
let cityDiv = document.getElementById(cityName); // made cityDiv variable
cityDiv.style.display = "block";
evt.currentTarget.className += " active";
cityDiv.append( makeOutsideDiv() ); // add the outsidediv to the active element
}
function makeOutsideDiv() {
let div = document.createElement("div");
div.innerHTML = "This div should appear no matter which tab is selected.";
div.id = "outsidediv";
return div;
}
.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;
}
#outsidediv {
position: fixed;
top: 80px;
right: 50px;
background: pink;
}
<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 id="outsidediv">This div should appear no matter which tab is selected.</div>
</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>

I used visibility instead of display, and each inactive tab I am setting position:fixed and sending it way above the rendered area of the page (out of sight and out of mind). Then when the tab is clicked again I'm setting it back to position:relative with no offset.
Here's the fiddle: https://jsfiddle.net/tm1wyax6/1/
<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 id="outsidediv">This div should appear no matter which tab is selected.</div>
</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.visibility = "hidden";
tabcontent[i].style.position = "fixed";
tabcontent[i].style.top = "-1000px";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.visibility = "visible";
document.getElementById(cityName).style.position = "relative";
document.getElementById(cityName).style.top = "0";
evt.currentTarget.className += " active";
}
</script>
CSS:
.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 {
visibility: hidden;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
#outsidediv {
position: fixed;
top: 80px;
right: 50px;
background: pink;
visibility: visible;
}

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.

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>