Help - Search - Members - Calendar
Full Version: How to keep html tab of one set open when two sets are used
HTMLHelp Forums > Programming > Client-side Scripting
Ramakrishna
I am using html tabs (2 sets) to hide content. If I am using two sets of tabs, when a tab from second set is clicked the tab from first set is getting closed causing webpage content jump. How to make sure that the tab from first set is not closed even after clicking tab from second set. Check the following webpage for reference. https://www.campusgate.co.in/2014/03/data-i...ion-tables.html

CODE
<style>
body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* 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: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
</style>
</head>
<body>

<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>

<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>

<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>
-------
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London1')">London1</button>
  <button class="tablinks" onclick="openCity(event, 'Paris1')">Paris1</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo1')">Tokyo1</button>
</div>

<div id="London1" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris1" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo1" 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>
CharlesEF
This is not a server side question. It is a client side question. If you want the first DIV to remain open then just comment out this code:
CODE
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
pandy
If the thread was in the server side forum it was my fault. I was going to move it here from HTML, but in that case I must have made a mistake.
CharlesEF
I only mentioned it because I thought the OP might not know the difference. No worries.
Ramakrishna
QUOTE(CharlesEF @ Nov 6 2019, 12:48 PM) *

This is not a server side question. It is a client side question. If you want the first DIV to remain open then just comment out this code:
CODE
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }



I commented out but none of the tabs are opening.
CharlesEF
That code has nothing to do with opening tabs. The code only hides tabs. If your tabs don't open then you need to post the new version of your code.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.