Submitted 10 months ago

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

Cheosphere• 1,040

@Cheosphere

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

FAQ accordion

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

...made with a lot of love 🤘🏻🙂

Community feedback

Jax Teller• 670

@piushbhandari

Posted 9 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

Shubham Kandpal• 50

@Shubham-kpl

Posted 9 months ago

Loved it man!! Just wow! Keep it up

rimar-basaa• 30

@rimar-basaa

Posted 5 months ago

Hola @Cheosphere, excelentes soluciones felicitaciones..

Zuhriddin Sharipov• 70

@ZUHRIDDIN-SHARIPOV

Posted 6 months ago

Wow, that's great.

zainy2401• 80

@zainy2401

Posted 7 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!

Theunis• 210

@theYuun

Posted 7 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.

BankuBa• 120

@BankuBa

Posted 9 months ago

just wow

Wagner Morais• 230

@wagnnermorais

Posted 9 months ago

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

Cheosphere• 1,040

@Cheosphere

Posted 9 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.

Yousef• 90

@ousey-ousey

Posted 9 months ago

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

Cheosphere• 1,040

@Cheosphere

Posted 9 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.

Dean• 480

@Deanogit

Posted 9 months ago

Dude! This is amazing! 🥹

Please log in to post a comment

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