Como posso fazer uma dupla de tab na mesma página, mantendo os conteúdos abertos e alternando apenas entre cada dupla? quero alternar apenas entre o conteúdo de London e Paris / Tokyo e Dublin, mas quando abro algum da segunda fileira o da primeira fecha, queria que ficasse aberto também e alternasse apenas entre os dois, estou tentando nesse código, alguma outra forma posso alternar conteúdo de duas tabs separadas sem uma alterar a outra em uma mesma página?
<!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>