Submitted over 3 years ago

FAQ Accordion Card - HTML / CSS - No JS

Dennis Griffin• 1,320

@dgdev1024

Preview site View code

This is a solution for...

FAQ accordion card

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Decided to do this one without using Javascript. The irony is that the difficulties I had with this one didn't even come from the FAQ accordion itself, but rather the background image setup. I worked that out with a creative use of psuedo elements and overflows. I even animate the '@' box in desktop mode!

At the end of the day, I had fun with this one. Hope you enjoy it!

Community feedback

ApplePieGiraffe• 30,565

@ApplePieGiraffe

Posted over 3 years ago

Hey, Dennis Griffin! 👋

Great work on this challenge! 👍

I, too, like the animation of the floating cube! 👏

I only suggest,

Adding a hover state to the titles of the FAQs (I believe the original design shows they should turn orange upon hover). It's a small detail that I forgot, too, when I tackled this challenge!

Happy coding! 😁

Dennis Griffin• 1,320

@dgdev1024

Posted over 3 years ago

@ApplePieGiraffe Fixed. Thanks for the catch!

Arturo Simon• 1,785

@artimys

Posted over 3 years ago

Nicely done sir. Never would I have thought to use radio buttons to create the accordion effect. HTML and CSS are also very well organized.

Love the box animation. Since the animation goes off every few seconds it could distract a user as they read the questions and answers...though not lengthy answers anyway.

Awesome work!!

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