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>
just that? can’t comment on what was done, what the problem, how do you solve?
– Ricardo Pontual
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
– gau
Just add the class
active
on the button you want to be selected, and bystyle="display:block"
in the tab you want to come already open.– TiagoA
but then the button stays selected even when closed, right? even if I go to the other button is the color of being selected
– gau
It will not stay, because the function removes the class
active
of the other.– TiagoA