Skip to content
Submitted over 1 year ago

FAQ accordion card (💬 HTML & CSS only)

Alexandre JOLIET•170
@alexandre-joliet
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion card
  • HTML
  • CSS
  • JS
1newbie

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•170
    @alexandre-jolietPosted over 1 year ago

    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

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