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

FAQ accordion

P
Paul 420

@mayor-creator

Desktop design screenshot for the FAQ accordion coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello, I have completed yet another project using CSS flex box, sass/scss and JS DOM. I had fun building. What are some best practices when implementing javascript functionality. Any suggestion on how to improve this or my code will be appreciated. Thank you.

Community feedback

P
p-tam 170

@p-tam

Posted

Nice work on your implementation.

A couple points for improvement. The first would be to give users the ability to close the answer by re-clicking the question. This can be achieved possibly by having a CSS styling to hide the element and then you can toggle the class on and off per click.

The second point of improvement would be to include a hover state that will turn the cursor into a pointer so that users know an element is clickable.

Other than that, all looks pretty good - looking forward to seeing your next challenge.

Marked as helpful

1

P
Paul 420

@mayor-creator

Posted

@p-tam thank you for the insightful feedback.

0
P

@seanbuckle

Posted

The design is well-implemented.

I would recommend using the <details> and <summary> tags, as they come with all the functionality you're looking for.

I can be built without JS using name="" attribute.

no support for name="" on Firefox, fairly new feature.

See link: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

Marked as helpful

0

P
Paul 420

@mayor-creator

Posted

@seanbuckle thank you for insightful feedback. I will make the necessary improvement to my code base. Thank you

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