Hey,
So i'm using w3css to display data on a web page. I've tried to implement the tabs used here - W3.CSS Tabs (w3schools.com).
The issue i've had, is if i try to use more than one tab section on a page, when i select a tab, it closes the other section. I want them to work as two individual tabs.
Can anyone assist? I know very little knowledge of js unfortunately.
Ive pasted the example of what im trying to do below.
Thanks in advance.
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>Tabs</h2>
<p>Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects. Click on the links below.</p>
</div>
<div class="w3-bar w3-black">
<button class="w3-bar-item w3-button" onclick="openCity('London1')">London1</button>
<button class="w3-bar-item w3-button" onclick="openCity('Paris1')">Paris1</button>
<button class="w3-bar-item w3-button" onclick="openCity('Tokyo1')">Tokyo1</button>
</div>
<div id="London1" class="w3-container city">
<h2>London1</h2>
<p>London is the capital city of England.</p>
</div>
<div id="Paris1" class="w3-container city" style="display:none">
<h2>Paris1</h2>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo1" class="w3-container city" style="display:none">
<h2>Tokyo1</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
<div class="w3-bar w3-blue">
<button class="w3-bar-item w3-button" onclick="openCity('London2')">London2</button>
<button class="w3-bar-item w3-button" onclick="openCity('Paris2')">Paris2</button>
<button class="w3-bar-item w3-button" onclick="openCity('Tokyo2')">Tokyo2</button>
</div>
<div id="London2" class="w3-container city">
<h2>London2</h2>
<p>London is the capital city of England.</p>
</div>
<div id="Paris2" class="w3-container city" style="display:none">
<h2>Paris2</h2>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo2" class="w3-container city" style="display:none">
<h2>Tokyo2</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
<div class="w3-container w3-red">
<h2>The Issue</h2>
<p>I want the two tab sections to work indvidually of each other. I want to be able to click London 1 and it not close anything in tab bar 2 and vice versa.</p>
</div>
<script>
function openCity(cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(cityName).style.display = "block";
}
</script>
</body>
</html>
