FAQ Accordion with HTML, CSS and JS

Community feedback

• 

  Vasiliki-Georgiou•290

  @Vasiliki-GeorgiouPosted 4 months ago

  Thank you very much for your help. I tried your proposed solution, but I could not make it entirely work with my code, but I found another way to resolve the bug of the buttons not having the desired behavior if a user clicked on them repeatedly.

  Have a nice day :-)

  0
• 

  Vinayak•300

  @V102002Posted 4 months ago

  Instead of : let minusSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="31" fill="none" viewBox="0 0 30 31"><path fill="#301534" d="M15 3.313A12.187 12.187 0 1 0 27.188 15.5 12.2 12.2 0 0 0 15 3.312Zm4.688 13.124h-9.375a.938.938 0 0 1 0-1.875h9.374a.938.938 0 0 1 0 1.876Z"/></svg>';

  Why not try:

  let minusSvg=document.querySelector("name of the image class"); And for plusSvg as well.

  For the accordians, we have to access each of them, so use a forEach loop access the icons and change them in the conditional statements It will look something like this

  const accordions = document.querySelectorAll('.accordion'); // get the accordion const backdrop = document.querySelector('.backdrop');

  accordions.forEach(accordion => { // access the answer and the image from each accordion const icon = accordion.querySelector(".icon"); const ans = accordion.querySelector(".answer");

  // adding a click eventListener to each accordion
  accordion.addEventListener("click", () => {
      ans.classList.toggle("active"); // adding the active class based on toggle
  
      // check if the accordion has been clicked
      if (ans.classList.contains("active")) {
          icon.src = "./assets/images/icon-minus.svg";
      } else {
          icon.src = "./assets/images/icon-plus.svg";
      }
  });
  

  }); Hope this helps!

  0