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

Animated FAQ Accordion With Pure CSS (CSS only)

@Wisemunk

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


Animated Pictures With only CSS :D Mobile Version is animated too.

Check it on: https://wisemunk.github.io/FAQ-Accordion-Animated-with-PureCSS/

I would like to have some feedback on this one ;)

Community feedback

Théo 120

@Atim360

Posted

That's pretty cool however I think that shouldn't make you lose sight of the original model. You forgot to center the element in the middle of the page and less important whether you don't have the Figma model but on click the question should be in bold. (You can see it on design folder : "active-states.jpg"). Otherwise I find the mobile version fine.

0

@Wisemunk

Posted

@Atim360

  • The element is centred in the web site but I don't know why its not well centred on the screen shoot they took.
  • I saw the the bold on click but I prefered to not do it, because I don't know a simple way with pure css to do it.
0
Théo 120

@Atim360

Posted

@Wisemunk, you can use the font-weight property for the bold. Like :

font-weight: 600;

But you need to download the right font-weights.

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