手风琴切换图标无法正常工作

Question

I am trying to add to my accordion minus sign to appear after clicking on the row.

I've tried adding minus/plus let and tried to add display.styles for it. But it seems really buggy and not working properly. How can I set this up properly? And it only works for first element instead of all.

 const tabs = document.querySelectorAll(".faq__tab").forEach(button => { button.addEventListener("click", () => { const tabsContent = button.nextElementSibling; button.classList.toggle('active-faq'); let minus = document.querySelector(".plus") let plus = document.querySelector(".minus") if (button.classList.contains('active-faq')) { tabsContent.style.maxHeight = tabsContent.scrollHeight + 'px'; plus.style.display = 'none'; minus.style.display = 'flex'; } else { tabsContent.style.maxHeight = 0; minus.style.display = 'none'; plus.style.display = 'flex'; } }) });

 .plus { padding-left: 10px; } .minus { padding-left: 10px; display: none; } .faq__panel { max-height: 0px; overflow: hidden; }

 <button class="faq__tab">Question <img src='img/plus.svg' alt="Show" class="plus"> <img src='img/minus-svg.png' alt="Hide" class="minus"> </button> <div class="faq__panel"> <p>Answerr </p> </div>

Answer 1

You probably need to use inline-flex instead of flex :

 const tabs = document.querySelectorAll(".faq__tab").forEach(button => { button.addEventListener("click", () => { const tabsContent = button.nextElementSibling; button.classList.toggle('active-faq'); let minus = button.querySelector(".plus");//instead of document use button to target the corresponding element let plus = button.querySelector(".minus");//instead of document use button to target the corresponding element if (button.classList.contains('active-faq')) { tabsContent.style.maxHeight = tabsContent.scrollHeight + 'px'; minus.style.display = 'none'; plus.style.display = 'inline-flex'; } else { tabsContent.style.maxHeight = 0; plus.style.display = 'none'; minus.style.display = 'inline-flex'; } }) });

 .plus { padding-left: 10px; } .minus { padding-left: 10px; display: none; } .faq__panel { max-height: 0px; overflow: hidden; }

 <button class="faq__tab">Question1 <img src='img/plus.svg' alt="Show" class="plus"> <img src='img/minus-svg.png' alt="Hide" class="minus"> </button> <div class="faq__panel"> <p>Answer1</p> </div> <button class="faq__tab">Question2 <img src='img/plus.svg' alt="Show" class="plus"> <img src='img/minus-svg.png' alt="Hide" class="minus"> </button> <div class="faq__panel"> <p>Answer2</p> </div>

Answer 2

The problem in that you're setting image display to flex , either give the button faq__tab display: flex in the css file, or set display: inline to images

if (button.classList.contains('active-faq')) {
  tabsContent.style.maxHeight = tabsContent.scrollHeight + 'px';
   plus.style.display = 'none';
  minus.style.display = 'inline';
} else {
  tabsContent.style.maxHeight = 0;
  minus.style.display = 'none';
  plus.style.display = 'inline';
}