pablodev | FAQ accordion

Hello,

Congratulations on successfully completing your challenge.

Your project is impressive, with clean and cool code.

I have some suggestions to further improve it:

• The FAQ section should behave like an accordion, where opening one question hides the others. You can achieve this by querying all the paragraphs and using conditional logic in a foreach loop to hide or show them.

Here is the updated version of your code, where the answer paragraphs have a class added to hide them:

document.addEventListener("DOMContentLoaded", function() {
    const buttons = document.querySelectorAll(".toggle-button");
    const paragraphs = document.querySelectorAll(".question-answer");

    buttons.forEach((button, index) => {
        button.addEventListener("click", function() {
            paragraphs.forEach((p, i) => {
                if (i === index) {
                    p.classList.toggle('hide');
                    button.src = p.classList.contains('hide')
                        ? './assets/images/icon-plus.svg'
                        : './assets/images/icon-minus.svg';
                } else {
                    p.classList.add('hide');
                    buttons[i].src = './assets/images/icon-plus.svg';
                }
            });
        });
    });
});

Keep up the hard work