FAQ Accordion Card with html css and pure js

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi! 👋

  Some recommendations from me.

  • I recommend formatting your code. It is currently hard to read and understand your code. Try using code-formatter such as Prettier to help you do this automatically.
  • The accordions are not a list. Use summary and details tags instead.
  • I recommend creating a function where it prevents the users to open more than one accordion panel. This way, the card will not have too much height because of the accordion panels get opened at the same time.

  That's it! I hope this helps!

  Marked as helpful

  1

  ---

  

  gurpreet•280

  @justcoder42022Posted about 2 years ago

  @vanzasetia thank you much for your time and great feedback. All recommendations are implemented. still open for feedback

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @justcoder42022 I took a look at the updated solution and I would say your solution is improved. The code is well-formatted and much more simple than before. Good job! 👍

  One more suggestion I have is to create a custom :focus-visible styling for any interactive elements (in this case the accordion). This will let people who use a keyboard to navigate the site know where they are currently on the page.

  Marked as helpful

  1

  

  gurpreet•280

  @justcoder42022Posted about 2 years ago

  @vanzasetia thank you so much sir for your suggestion and code review

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @justcoder42022 You are welcome!

  Marked as helpful

  1