Submitted 4 months ago

Non-responsive/Desktop solution for FAQ accordion

dripper91• 130

@dripper91

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

FAQ accordion

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

This was my first solution using JavaScript and event listeners so that was cool. In the future I will build responsive apps.

What challenges did you encounter, and how did you overcome them?

I was unsure how to hide and show elements at first but I was able to find very helpful solutions on YouTube and Stack Overflow.

What specific areas of your project would you like help with?

I have not learned responsive design yet so that's why there is no grid or flex display. I would like to know how I can make the background image the same width as the window. If there's any more optimizations or tips you can add let me know.

Community feedback

Alex• 3,130

@Alex-Archer-I

Posted 4 months ago

Hi!

To fix your background issue you can use those rules:

body {
    background-image: url("../assets/images/background-pattern-desktop.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

Also I can suggest you a little improvement for your code. You can use for-of to iterate through array of elements which a bit easier. Like this:

for (const element of questions) {
    plus[i].addEventListener("click", () => {
        plus[i].classList.toggle("hidden")
        minus[i].classList.toggle("hidden")
        answers[i].classList.toggle("hidden")
    })
}

And you can declare separate function and pass it as callback in addeventListener. It will make a code leaner and it's considered a good practice - to not repeat code.

Hope it'll help. Happy coding =)

Please log in to post a comment

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