Skip to content
Submitted 9 months ago

Faq-accordion

Daniel king•240
@thedanielking
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

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

  • Jake Godsall•1,390
    @jakegodsallPosted 9 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 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
    1

Please log in to post a comment

Log in with GitHub

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