I am trying to make an accordion (Faq's) for my website in a frequently asked questions section. Clicking on an element edits the fa-plus symbol only on the first div
faq-options : I don't understand why this happens and I need it to be edited only on the one I'm clicking on.
HTML
<div class="faq-accordion">
<div class="faq-options">
<button class="accordion">pregunta 1<i class="fas fa-plus" id="plus"></i></button>
<div class="panel">
<p>prueba</p>
</div>
</div>
<div class="faq-options">
<button class="accordion">pregunta 2 <i class="fas fa-plus" id="plus"></i></button>
<div class="panel">
<p>prueba</p>
</div>
</div>
JAVA SCRIPT
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
var plus = document.getElementById("plus");
if (plus.classList.contains("fa-plus")){
plus.classList.replace("fa-plus", "fa-minus");
} else{
plus.classList.replace("fa-minus", "fa-plus");
}
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
1 Answers