So essentially i have this javascript code:
var coll = document.getElementsByClassName("btn1");
var i;
for (let i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
var coll = document.getElementsByClassName("btn2");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
var coll = document.getElementsByClassName("btn3");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
}
And I want to be able to make an array that links the classes of "btn", essentially a way of condensing the code into a smaller segment and utilizing array to list the buttons. The buttons link to this HTML:
<button class="btn1">
<img src="dylan.png" alt="Dylan Conaway" style="width:100px"><br><br>Dylan Conaway
</button>
<button class="btn2">
<img src="shania.jpeg" alt="Shania Ammons" style="width:100px"><br><br>Shania Ammons
</button>
<button class="btn3">
<img src="shelia.png" alt="Shelia Eddy" style="width:100px"/><br><br>Shelia Eddy
</button>
Anyone know if this is possible?
Thanks in advance for any help!!