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 card solution-pure css

#bootstrap#jquery

@somaye-beiranvand

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello everyone It was a fun challenge I learned how to make accordion using summary and details tags Any feedback about my code or design is welcome

I added best practice for menu using one line of jquery, when you click on a menu item the other one would get closed.

Community feedback

David 8,000

@DavidMorgade

Posted

Hey Somaye! great job getting the challenge done, I like a lot how you managed the dropdown menus, it seems to work smoothly!

If you don't mind I would like to give you some suggestions for your code:

  • Regarding the styles I have nothing to say, good work with your Bootstrap, it seems that you managed to the work done with it!

  • The only problems I find are with the html semantics, you should try using some semantic tags like main section or article instead of all divs!, also don't forget to at some alt text to your images for a better accessibility. Nice work with the <details> and <summary> tags tho.

Hope my feedback helps you man!, gonna bookmark this solution to get inspired on the future, good job!

Marked as helpful

1

@somaye-beiranvand

Posted

@DavidMorgade

Hi David

thank you so much

sure your feedback would be helpful for me

1

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