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 (💬 HTML & CSS only)

@alexandre-joliet

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

Another project finished and this one was quite challenging for me! It's not perfect but I'm happy with the outcome without using any JS!

The main difficulties were:

  • How to trigger elements and change their current state using CSS only (> input)
  • Trigger elements by the same input but with different hierarchy levels (> siblings combinators)
  • How to position correctly the pictures and layer them (> position + z-index + overflow)

I still have one question though: how could I make my main container grow with its content? For intance, here if I deploy all the accordions, the text will go outside the container... Or maybe I could block the opening to only one tab at once somehow?

Thank you for your feedbacks 🙏 !

Community feedback

@alexandre-joliet

Posted

I think I have found the answer of my "grow issue"!

Very simple actually: I didn't pay attention in the first place but I have put an max-height to my main container. By replacing it by a min-height, problem solved!

Always good to review your code after a good night of sleep 😅 !

I just need to find a way to fix the position of the floating box now though...

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