FAQ Accordion Card. Using pure Html, Css and Js.

Community feedback

• 

  T

  Grace•30,990

  @grace-snowPosted almost 4 years ago

  Hi this looks really nice and works great. With collapsible sections its more usual a ui patten to be able to have more than one open at once, this is more like tab functionality in an accordion style. But still looks good!

  One real enhancement would be to add keyboard functionality. The easiest may to make your solution accessible would be to use a button as the trigger. That means you'd not have the questions in a paragraph, but they could be in a span inside a button. That would give you full keyboard interactivity and focus very easily.

  Good luck with it ☺

  Ps Upvote if the comments are helpful

  3

  ---

  

  Renszo Camacho•1,615

  @RenszCamachoPosted almost 4 years ago

  Hello @grace-snow.
  Good point about collapsed sections. That was the first thing I thought about, using a toggle, and that way I could keep more than one section open, but I changed my mind because by keeping more than one section open, at some point, it would go out of the box. And I would have to put an 'overflow: hidden' and '-webkit-scrollbar: display none'. And I wasn't sure if that was the best way to do it. (But now I have it clearer )

  About keyboard functionality. It's something I hadn't thought of. I'm going to work on it.

  Many thanks for the feedback.

  P.s: Have a Happy New Year.

  0
• 

  Dragos Popescu•320

  @ospopPosted almost 4 years ago

  Hi!

  The 'accordion' elements don't roll back after you click outside the container box. I think the user expects to go back to the original state of it when hovering or clicking outside the stack. Maybe add one more event listener?

  Everything else seems to be on point, great job!

  2

  ---

  

  Renszo Camacho•1,615

  @RenszCamachoPosted almost 4 years ago

  Hi, @popescudragos. Yes, it's true, I hadn't thought about to remove the active class. Thanks for the feedback. Have a Happy New Year.

  1
• 

  Abhik•4,840

  @abhik-bPosted almost 4 years ago

  Hi Renszo 👋 Your solutions is fantastic 🙌 , it is very responsive and the accordions are very smooth 💯

  Fantastic Job , Happy Coding 😇 and Keep contributing these amazing solutions 🚀

  1

  ---

  

  Renszo Camacho•1,615

  @RenszCamachoPosted almost 4 years ago

  Hi there @abhik-b. Thank you very much, my friend. Happy New Year.

  0