0

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!!

0 Answers0