@jakegodsall
Posted
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 the accordion-item is active and show the minus-icon. On line 17 of your JavaScript you are not actually applying the display: block on the minus-icon, but again on the plus-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 helpful
