Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

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

Renszo Camacho• 1,615

@RenszCamacho

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello there. I just finished this challenge, I would really love to hear your thoughts on how I can improve, Thank you.

Community feedback

P
Grace• 27,870

@grace-snow

Posted

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

@RenszCamacho

Posted

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

@ospop

Posted

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

@RenszCamacho

Posted

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-b

Posted

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

@RenszCamacho

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

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