FAQ Accordion with HTML, CSS and JS

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 :-)

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!