Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Good (i think)

@brendowe

Desktop design screenshot for the FAQ accordion coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Alex 3,130

@Alex-Archer-I

Posted

Hi! Congrats on completing the challenge =)

I can give you a tip how to make your code leaner. You can use querySelectorAll() to get all the buttons from your page. This function returns an array (technically it's not an array but NodeList, but right now that doesn't matter). Now you can use for-of loop to iterate through all those buttons.

const buttons = document.querySelectorAll('button');
const paragraphs = document.querySelectorAll('p');

for (const elem of buttons) {
    elem.addEventListener('click', function() {
        /* Here you can use iteration again to close all paragraphs and change icons of buttons. */
        for (const item of paragraphs) {
            item.style.display = 'none';
        };

        for (const item of buttons) {
            item.firstElementChild.src = "assets/images/icon-plus.svg";
        };

        /* And than open the paragraph you need and change icon of the button. */
        elem.parentElement.nextElementSibling.style.dysplay = 'block';
        elem.firstElementChild.src = "assets/images/icon-minus.svg";
    });
};

That code will do the same thing as your but it's shorter =) If you are not familiar with parentElement and nextElementSibling properties - they select accordingly the parent div of the button and p element next to it. And firstElementChild select the first child element of button which in your case is img.

Unfortunately it's not solving another part of the challenge - question doesn't close by the second click on it. So, if you want to improve your solution try to implement it =)

Anyway, you did a good work. Keep doing =) Good luck =)

Marked as helpful

0

@brendowe

Posted

@Alex-Archer-I Thanks a lot for the help. I will apply your solution and study it. I confess that I tried to apply something like this, but I was getting lost on how to close it... I need to improve my interaction between HTML and JS. Your code really became much smaller and more elegant wow.

1
Alex 3,130

@Alex-Archer-I

Posted

@brendowe

You're welcome =) Hope that could help =)

It's mostly a matter of practice. As you learn JS and especially DOM manipulations (that is the part of JS which manipulate the HTML tags) you'll notice that there are a lot of ways to achieve the same result. And with practice they'll settled in your head much easier =)

Fell free to ask or comment if you need =)

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord