Frontend Mentor -- Responsive FAQ Accordion Design

Hello,There

Congratulations on successfully completing your challenge.

Your project is impressive.

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 code, where some classes should be added to html elements like .toggle-button to plus and minus images and .question-answer to the p of answers

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';
                }
            });
        });
    });
});

Explanation:

• This code adds an event listener to the document that waits for the DOM content to be fully loaded. Once loaded, it selects all elements with the class "toggle-button" and question-answer using document.querySelectorAll().

• It then loops through each button using forEach() and adds a click event listener to each button. When a button is clicked, it loops through each paragraph and checks if the index of the paragraph matches the index of the clicked button. If they match, it toggles the hide class on the paragraph and changes the source of the button's image depending on whether the hide class is present or not.

• If the indexes do not match, it adds the hide class to the paragraph and changes the source of the button's image to ./assets/images/icon-plus.svg.

Hope that's helpful!

Keep up the great work!

Keep up the hard work