The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> How to keep html tab of one set open when two sets are used
Ramakrishna
post Nov 5 2019, 01:59 AM
Post #1





Group: Members
Posts: 2
Joined: 5-November 19
Member No.: 27,033



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
6 User(s) are reading this topic (6 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 26th January 2020 - 09:30 PM