Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ How to keep html tab of one set open when two sets are used

Posted by: Ramakrishna Nov 5 2019, 01:59 AM

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

Posted by: CharlesEF Nov 6 2019, 02:18 AM

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";
  }

Posted by: pandy Nov 6 2019, 10:24 AM

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.

Posted by: CharlesEF Nov 7 2019, 02:37 AM

I only mentioned it because I thought the OP might not know the difference. No worries.

Posted by: Ramakrishna Nov 13 2019, 04:12 AM

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.

Posted by: CharlesEF Nov 13 2019, 03:18 PM

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.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)