Design comparison
Solution retrospective
I used JavaScript for the first time. If you know a better way to work in JavaScript, ensure to reach out to me in the comment section. All feedbacks are very well appreciated. Thanks.
Community feedback
- @jakegodsallPosted 8 months ago
Hi 👋
This is very nice! Well done.
Regarding the JavaScript. This is pretty much how I'd solve the problem too! Using a
forEach()
loop through the elements and applying the event listener.However, it seems that you intended to hide the
plus-icon
when theaccordion-item
is active and show theminus-icon
. On line 17 of your JavaScript you are not actually applying thedisplay: block
on theminus-icon
, but again on theplus-icon
. Just a typo I'm sure!If I was to implement this logic generally, I think I would probably define the active and non-active styles as classes on the elements, and then just use the JavaScript to add and remove the classes to the elements on the click event, rather than manipulating the CSS directly from the JavaScript, but that could be a personal preference. That way we don't need to manipulate multiple CSS values on a click event on an element, but just toggle the class.
Great work though. It looks really neat 👍
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin 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