I am trying to build a gallery that will showcase my responsive design projects. I want to have one accordion for each project which expands to reveal two tabs: (1) the desktop version and (2) the mobile version. The tab for the desktop version will be open by default.
Liveweave - Working Tabs
Screenshot - Desktop Tab Open
Screenshot - Mobile Tab Open
I grabbed code for the accordions and tabs from w3schools, which works perfectly for the first project. However, when I add more projects (more accordions and tabs), the tabs stop functioning properly.
I do not know JavaScript too well so can someone please help me?
Here is the HTML for the accordion and tabs:
<button class="accordion">Project 1</button>
<div class="panel">
<div class="tab">
<button class="tablinks" onclick="openPreview(event, 'Desktop')" id="defaultOpen">Desktop</button><button class="tablinks" onclick="openPreview(event, 'Mobile')">Mobile</button>
</div>
<div id="Desktop" class="tabcontent">
<div class="preview-desktop-container">
<div class="preview-desktop">
<img src="https://placehold.it/600x900.jpg" width="100%" height="auto" alt="Desktop Version">
</div>
</div>
</div>
<div id="Mobile" class="tabcontent">
<div class="preview-mobile-container">
<div class="preview-mobile">
<img src="https://placehold.it/320x1800.jpg" width="100%" height="auto" alt="Mobile Version">
</div>
</div>
</div>
</div>
And here is the JavaScript:
<script>
// Accordions
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
// Open the first accordion
var firstAccordion = acc[0];
var firstPanel = firstAccordion.nextElementSibling;
firstAccordion.classList.add("active");
firstPanel.style.maxHeight = "100%";
// Tabs
function openPreview(evt, deviceName) {
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(deviceName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
As I said, this works fine for one project. When I add more projects (by duplicating the first project and using it as a template), the tabs stop working. Please see below.
Liveweave - Broken Tabs
Screenshot - Broken Tabs
Here is the HTML for the broken tabs:
<button class="accordion">Project 1</button>
<div class="panel">
<div class="tab">
<button class="tablinks" onclick="openPreview(event, 'Desktop')" id="defaultOpen1">Desktop</button><button class="tablinks" onclick="openPreview(event, 'Mobile')">Mobile</button>
</div>
<div id="Desktop1" class="tabcontent">
<div class="preview-desktop-container">
<div class="preview-desktop">
<img src="https://placehold.it/600x900.jpg" width="100%" height="auto" alt="Desktop Version">
</div>
</div>
</div>
<div id="Mobile1" class="tabcontent">
<div class="preview-mobile-container">
<div class="preview-mobile">
<img src="https://placehold.it/320x1800.jpg" width="100%" height="auto" alt="Mobile Version">
</div>
</div>
</div>
</div>
<button class="accordion">Project 2</button>
<div class="panel">
<div class="tab">
<button class="tablinks" onclick="openPreview(event, 'Desktop')" id="defaultOpen2">Desktop</button><button class="tablinks" onclick="openPreview(event, 'Mobile')">Mobile</button>
</div>
<div id="Desktop2" class="tabcontent">
<div class="preview-desktop-container">
<div class="preview-desktop">
<img src="https://placehold.it/600x900.jpg" width="100%" height="auto" alt="Desktop Version">
</div>
</div>
</div>
<div id="Mobile2" class="tabcontent">
<div class="preview-mobile-container">
<div class="preview-mobile">
<img src="https://placehold.it/320x1800.jpg" width="100%" height="auto" alt="Mobile Version">
</div>
</div>
</div>
</div>
<button class="accordion">Project 3</button>
<div class="panel">
<div class="tab">
<button class="tablinks" onclick="openPreview(event, 'Desktop')" id="defaultOpen3">Desktop</button><button class="tablinks" onclick="openPreview(event, 'Mobile')">Mobile</button>
</div>
<div id="Desktop3" class="tabcontent">
<div class="preview-desktop-container">
<div class="preview-desktop">
<img src="https://placehold.it/600x900.jpg" width="100%" height="auto" alt="Desktop Version">
</div>
</div>
</div>
<div id="Mobile3" class="tabcontent">
<div class="preview-mobile-container">
<div class="preview-mobile">
<img src="https://placehold.it/320x1800.jpg" width="100%" height="auto" alt="Mobile Version">
</div>
</div>
</div>
</div>
As you can see, there are 3 elements which have id's:
button id="defaultOpen"
div id="Desktop"
div id="Mobile"
When I duplicated the first project, I added numbers after the id's to make them unique. For example, I changed "defaultOpen" to "defaultOpen1". I think this must be conflicting with the JavaScript, but I don't know what the problem is or how to fix it!
I would really appreciate somebody's help. Please let me know if I need to provide additional information. Thank you in advance... and sorry for the length of this post!
question from:
https://stackoverflow.com/questions/65839554/javascript-for-tabs-stops-working-when-tabs-are-repeated-on-page-with-different 
