I'm attempting to write a function that can achieve the functionality shown in this example without repeating code. I want to create tabs that display content based on which tab is clicked, similar to this: https://www.w3schools.com/howto/howto_js_tabs.asp, but without using onClick directly in the HTML. While I am able to toggle the active class for buttons, I'm struggling with changing the style.display property of the tab content. The current code works as intended, but I believe there is a more elegant solution.
What adjustments should I make to my openTab function to achieve the desired outcome?
Is there a better approach for adding event listeners to the buttons?
document.getElementById("btn1").addEventListener("click", function() {
document.getElementById("content1").className ="show";
document.getElementById("content2").className ="tabcontent";
document.getElementById("content3").className ="tabcontent";
});
document.getElementById("btn2").addEventListener("click", function() {
document.getElementById("content1").className ="tabcontent";
document.getElementById("content2").className ="show";
document.getElementById("content3").className ="tabcontent";
});
document.getElementById("btn3").addEventListener("click", function() {
document.getElementById("content1").className ="tabcontent";
document.getElementById("content2").className ="tabcontent";
document.getElementById("content3").className ="show";
});
function openTab(evt) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
console.log('first')
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
evt.currentTarget.className += " active";
//this loop adds a style.display = "block" to every tabcontent class.
for (i=0; tabcontent.length; i++) {
tabcontent[i].style.display = "block";
}
//if I make the id's for all the divs "content" this line adds the style.display = "block" to
only the first tabcontent class
//document.getElementById("content").style.display = "block";
}
document.getElementById("btn1").addEventListener("click", openTab);
document.getElementById("btn2").addEventListener("click", openTab);
document.getElementById("btn3").addEventListener("click", openTab);
<div class="tab-container">
<button class="tablinks" id="btn1">Fit Guide</button>
<button class="tablinks" id="btn2">Care</button>
<button class="tablinks" id="btn3">Material</button>
</div>
<div id="content1" class="tabcontent">
<p>Integer vel arcu ac dolor tincidunt dapibus..</p>
</div>
<div id="content2" class="tabcontent">
<p>Integer vel arcu ac dolor tincidunt dapibus..</p>
</div>
<div id="content3" class="tabcontent">
<p>Integer vel arcu ac dolor tincidunt dapibus..</p>
</div>