FAQ accordion (HTML | CSS | Vue JS Composition API + Vite )

Community feedback

• 

  P

  Jax Teller•670

  @piushbhandariPosted 11 months ago

  had a quick look at your markup:

  • i would change .faqs-header to a button instead of a div for semantic/accessibility reasons. additionally you can look into adding attributes aria-hidden for accordion content and aria-expanded for accordion buttons so screen readers will announce these.
  • h3 to h2 since you have h3 right after h1
  • because the accordion buttons are not actual <button> elements, your component is not accessible for keyboard users. hope this helps

  Marked as helpful

  4
• 

  Shubham Kandpal•50

  @Shubham-kplPosted 11 months ago

  Loved it man!! Just wow! Keep it up

  2
• 

  rimar-basaa•30

  @rimar-basaaPosted 7 months ago

  Hola @Cheosphere, excelentes soluciones felicitaciones..

  1
• 

  P

  Zuhriddin Sharipov•70

  @ZUHRIDDIN-SHARIPOVPosted 7 months ago

  Wow, that's great.

  1
• 

  Zain•150

  @zainy2401Posted 9 months ago

  Such a good solution, I'm jealous! I love how you've used Vue.js to build this and I'm hoping I can learn to do this soon with a JS library like this or maybe React!

  1
• 

  Theunis•210

  @theYuunPosted 9 months ago

  Awesome! I didn't even think to reduce input count by removing the enter/space key to expand/collapse the answer. Also cool that the Tab key does not cross onto the page at all, but I left that in in case accessibility controllers use the key to navigate.

  1
• 

  BankuBa•120

  @BankuBaPosted 11 months ago

  just wow

  1
• 

  Wagner Morais•230

  @wagnnermoraisPosted 11 months ago

  i'd add a transition when a question get open, besides that, nice job.

  1

  ---

  

  Cheosphere•1,040

  @CheospherePosted 11 months ago

  Hi @wagnnermorais, I just implemented it, I'm experimenting with Vue and I had some problems at first implementing the css transition effect, but with the documentation and chatGPT I managed to do it haha.

  0
• 

  Yousef•90

  @ousey-ouseyPosted 11 months ago

  cool man ! you may add feature on click again on "-" it disappear

  1

  ---

  

  Cheosphere•1,040

  @CheospherePosted 11 months ago

  Hello @ousey-ousey, thank you very much for your comment. I preferred to do it this way, because the brief indicates that the user can navigate through the questions and answers using the keyboard, and I believe that this way a better user experience is achieved.

  P.S: @ousey-ousey ...I am editing this comment to tell you that it now allows you to hide the answer and at the same time navigate with the keyboard.

  2
• 

  P

  Dean•480

  @DeanogitPosted 11 months ago

  Dude! This is amazing! 🥹

  1