FAQ accordion card using Flexbox, Grid and vanilla JS

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  ACCORDION 🔴 :

  • The best way to go with creating the accordion elements in this challenge would be with the details and summary elements (or perhaps a combination of buttons and other elements).

  ---

  • They are already fairly accessible and provided a clean, semantic way to create accordion elements. I see you have used the li, button & p elements for the accordions with inclusive menu buttons, but those are the hard ways to achieve interactive or accessible interfaces by keyboard, so instead of these we can just use native html element details & summary to get all features without any external scripts like inclusive-menu-buttons. We can reduces tons of code by switching to native elements

  ---

  • MDN's reference is a great place to start learning about the details and summary elements if you are interested.

  ---

  • If you have any questions or need further clarification, you can always check out my submission for this challenge and/or feel free to reach out to me.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1

  ---

  

  P

  Wessel Konstantinov•350

  @WesselKonstantinovPosted over 1 year ago

  @0xAbdulKhalid Thank you for the recommendation! The resources I found frequently mentioned the use of JavaScript to build an accordion, so I thought I had to use JS, but it is good to know there are also native HTML elements that can be used instead. I will look into MDN's reference and try out another implementation using these elements on a separate branch.

  Thank you once again!

  0