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

CSS only Accordion (no JS challenge)

Benja.min 740

@BenjaDotMin

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 all, I decided to try my hand at the bonus challenge listed in the project notes (no JS). The accordion is a pure css approach, with no use of JS to toggle the accordion. Please let me know if there is a better solution!

At first this layout seemed obvious, but I ran into a few issues, such as how does the card behave if more than one accordion is open, and how it should wrap down for tablet views (no design provided). I made a few decisions myself, and I hope it works well.

As always, I look forward to any advice.

Community feedback

@Draghonite

Posted

I see, what you mean...for tablet and below, you made it scale down infinitely, which is a great idea though a min-width would've been good.

Also, there's currently a javascript error in the console, when loading the favicon.

I missed the active state and the bonus part...I got stuck on getting the images positioned right and couldn't get the shadow under the orange box with my method, which you accomplished. So I will be digging into your code for some pointers, especially given your css-only approach.

Overall, a solid attempt.

Marked as helpful

1

Benja.min 740

@BenjaDotMin

Posted

@Draghonite Yea that could be a good idea to add a min-width, good catch.

But yea feel welcome to take out parts of my code, it may not be the perfect solution, but I am fine with sharing it if it helps you achieve the look you want.

Thanks for the comment!

1

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