The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 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
CharlesEF
post Nov 6 2019, 02:18 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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";
  }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 6 2019, 10:24 AM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Nov 7 2019, 02:37 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



I only mentioned it because I thought the OP might not know the difference. No worries.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Ramakrishna
post Nov 13 2019, 04:12 AM
Post #5





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



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Nov 13 2019, 03:18 PM
Post #6


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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

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

 



- Lo-Fi Version Time is now: 18th March 2024 - 09:21 PM