Responsive FAQ Accordion Card using HTML, CSS & JS

Community feedback

• 

  Bishal Singh Deo🎮•1,440

  @Bishalsnghd07Posted 9 months ago

  Hi, @bccpadge 👋

  Congrats for completing this challenge 🎉

  I have one suggestion for you: Give, some padding or internal margin in your faq's section. So, that when click on up or down arrow to navigate through each question, your container size will remain same in mobile view and will look much better. Other than that fantastic work❤️ Have you did developer testing from your side to check this?

  Marked as helpful

  0

  ---

  

  Rebecca Padgett•1,840

  @bccpadgePosted 9 months ago

  @Bishalsnghd07

  Thank you for the feedback.

  0
• 

  P

  solvman•1,650

  @solvmanPosted 9 months ago

  Hi Rebecca,

  It is a very well-done project! Several aria attributes must be used to make the accordion fully accessible, such as aria-expanded, aria-controls, aria-labeledby, and region. If you are interested in the recommended way of doing accessible accordion, the ARIA Authoring Practices Guide (APG) offers an example in Accordion Example. I hope you find it useful!

  Otherwise, your implementation is pixel-perfect! 🤩

  0

  ---

  

  Rebecca Padgett•1,840

  @bccpadgePosted 9 months ago

  @solvman

  Thank you for the feedback. I implemented the aria attributes via JavaScript.

  1
• 

  P

  Rafael Dias•910

  @rafaeldgeoPosted about 1 year ago

  Hi Rebecca,

  Congratulation for your challenge! You could use HTML tag <details> and <summary> tag to create the accordion. It isn't necessary JS, besides it's a accessible. You can know more on the W3Schools.com.

  I hope I've helped.

  0

  ---

  

  Rebecca Padgett•1,840

  @bccpadgePosted about 1 year ago

  @rafaeldgeo

  I looked at HTML tag <details> and <summary> tag to create the accordion but I couldn't figure out how to add keyboard event in JavaScript. Using <details> and <summary> tag is only available by the TAB.

  1