Separate tabs on a page

Asked

Viewed 37 times

1

How can I make a double tab on the same page, keeping the contents open and only switching between each double? I just want to switch between the content of London and Paris / Tokyo and Dublin, but when I open some of the second row the first row closes, I want it to stay open as well and only alternate between the two, I’m trying in this code, some other way I can switch content from two separate tabs without one changing the other on a single page?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>



<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  

</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis arcu in tellus ultricies, vel ultrices quam egestas. Proin luctus nec lacus vitae sollicitudin. Aliquam sed porttitor nisl. Curabitur hendrerit metus nunc, id laoreet magna iaculis molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ut posuere nunc, in condimentum lorem. </p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis arcu in tellus ultricies, vel ultrices quam egestas. Proin luctus nec lacus vitae sollicitudin. Aliquam sed porttitor nisl. Curabitur hendrerit metus nunc, id laoreet magna iaculis molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ut posuere nunc, in condimentum lorem. .</p> 
</div>





<div class="tab">

 <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
    <button class="tablinks" onclick="openCity(event, 'Dublin')">Dublin</button></div>


<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>TLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis arcu in tellus ultricies, vel ultrices quam egestas. Proin luctus nec lacus vitae sollicitudin. Aliquam sed porttitor nisl. Curabitur hendrerit metus nunc, id laoreet magna iaculis molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ut posuere nunc, in condimentum lorem. </p>
</div>


<div id="Dublin" class="tabcontent">
  <h3>Dublin</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis arcu in tellus ultricies, vel ultrices quam egestas. Proin luctus nec lacus vitae sollicitudin. Aliquam sed porttitor nisl. Curabitur hendrerit metus nunc, id laoreet magna iaculis molestie. </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>
   
</body>
</html>

]1]1

javascript html css menu tabs

1 answer

0


When using the getElementsByClassName("tabcontent") it selects all elements with the class tabcontent, so to solve just group adding another class in HTML and passing it as parameter in the function: 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<div class="tab">
  <button class="tablinks group1" onclick="openCity(event, 'London', 'group1')">London</button>
  <button class="tablinks group1" onclick="openCity(event, 'Paris', 'group1')">Paris</button>
</div>

<div id="London" class="tabcontent group1">
  <h3>London</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis arcu in tellus ultricies, vel ultrices quam egestas. Proin luctus nec lacus vitae sollicitudin. Aliquam sed porttitor nisl. Curabitur hendrerit metus nunc, id laoreet magna iaculis molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ut posuere nunc, in condimentum lorem. </p>
</div>

<div id="Paris" class="tabcontent group1">
  <h3>Paris</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis arcu in tellus ultricies, vel ultrices quam egestas. Proin luctus nec lacus vitae sollicitudin. Aliquam sed porttitor nisl. Curabitur hendrerit metus nunc, id laoreet magna iaculis molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ut posuere nunc, in condimentum lorem. .</p> 
</div>
<div class="tab">
 <button class="tablinks group2" onclick="openCity(event, 'Tokyo', 'group2')">Tokyo</button>
    <button class="tablinks group2" onclick="openCity(event, 'Dublin', 'group2')">Dublin</button></div>
<div id="Tokyo" class="tabcontent group2">
  <h3>Tokyo</h3>
  <p>TLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis arcu in tellus ultricies, vel ultrices quam egestas. Proin luctus nec lacus vitae sollicitudin. Aliquam sed porttitor nisl. Curabitur hendrerit metus nunc, id laoreet magna iaculis molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ut posuere nunc, in condimentum lorem. </p>
</div>
<div id="Dublin" class="tabcontent group2">
  <h3>Dublin</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis arcu in tellus ultricies, vel ultrices quam egestas. Proin luctus nec lacus vitae sollicitudin. Aliquam sed porttitor nisl. Curabitur hendrerit metus nunc, id laoreet magna iaculis molestie. </p>
</div>
<script>
function openCity(evt, cityName, group) {
  var i, tabcontent, tablinks;
  tabcontent = document.querySelectorAll(".tabcontent."+group);
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.querySelectorAll(".tablinks."+group);
  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>
</body>
</html>

  • just that? can’t comment on what was done, what the problem, how do you solve?

  • Thank you, do you have any function that I can make the Tokyo button already selected by uploading my page? The first one, London, I got it but Tokyo didn’t

  • Just add the class active on the button you want to be selected, and by style="display:block" in the tab you want to come already open.

  • but then the button stays selected even when closed, right? even if I go to the other button is the color of being selected

  • It will not stay, because the function removes the class active of the other.

Browser other questions tagged javascript html css menu tabs

You are not signed in. Login or sign up in order to post.