Skip to content
Submitted almost 5 years ago

FAQ Accordion Card - HTML / CSS - No JS

Dennis Griffin•1,320
@dgdev1024
A solution to the FAQ accordion card challenge
Preview (opens in new tab)Code (opens in new tab)

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!

Code

Please log in to post a comment

Log in

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

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

  • Arturo Simon•1,805
    @artimys

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

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