Multiple Tabs on same page not working?

Bonxy · October 11, 2022

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>

dsonesuk · October 12, 2022

You have to restrict it to those in tab grouping by placing a container around the grouping and making the function work to that grouping where click event happened.

<!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="parent_target">
<div class="w3-bar w3-black">
  <button class="w3-bar-item w3-button" onclick="openCity(this,'London1')">London1</button>
  <button class="w3-bar-item w3-button" onclick="openCity(this,'Paris1')">Paris1</button>
  <button class="w3-bar-item w3-button" onclick="openCity(this,'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>
<div class="parent_target">
<div class="w3-bar w3-blue">
  <button class="w3-bar-item w3-button" onclick="openCity(this,'London2')">London2</button>
  <button class="w3-bar-item w3-button" onclick="openCity(this,'Paris2')">Paris2</button>
  <button class="w3-bar-item w3-button" onclick="openCity(this,'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>
<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(elem, cityName) {

  var i;
  var x = elem.parentNode.parentNode.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
  
    x[i].style.display = "none"; 

  }
  document.getElementById(cityName).style.display = "block";  
}
</script>

</body>
</html>

Sign In

Multiple Tabs on same page not working?

Recommended Posts

Bonxy

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity