Skip to content
Submitted over 2 years ago

FAQ Accordian Card

Grant Ramsay•280
@seapagan
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

This one took too long and most of it was on getting the images to work! I think the end result looks ok, but I'm not too happy with the CSS, is there a better way to do this?

I also tried to use more semantic HTML this time, any advice on how to improve more?

All comments welcome 😄

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 2 years ago

    Hey, Grant Ramsay! 👋

    Great job on this challenge! 👏 Your solution looks good and is responsive! 🙌

    Your HTML looks pretty good! For the accordion elements, you can use the details and summary elements, which can be used to create fully functional and fairly accessible accordions right out of the box! They make creating accordions a lot easier and might be useful for your next project. If you'd like to learn more about how to use them, check out this article from MDN.

    As for the images in this challenge, I placed the "background" image on the card itself (so that it wouldn't overflow over the edge of the card) and added the floating cube and the main illustration with img tags (so that I could position them in a way that they would overflow the edge of the card, which is desired). That worked out fairly well for me. 🙂 If you'd like to check out my solution for any ideas, you can do so here.

    Hope you find this helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful
    2
    Grant Ramsay•280
    @seapaganPosted over 2 years ago

    Hi ApplePieGiraffe 😀

    Thank you for your comment and suggestions!

    I was aware that there exists a pure-HTML way to do the accordion, though not the exact details, and I have never really tried to use so thanks for the link and push in that direction. I wanted to use JS for this purely to improve my skills in 'plain' JS.

    Now that I see that the details/summary tags can be heavily customised too, I'll be using that more 😁

    Excellent hints on the image placement, thank you. I'll admit that probably 95% of my time and 100% of my frustration were spent trying to get the images looking good! I checked out your submission; that's outstanding work 👏 so I've pinned the link 😊

    Many thanks again for your helpful comments

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 2 years ago

    @seapagan

    Happy to hear that was helpful! 😊 It's great that you're looking to improve your vanilla JS skills, which is always useful! 😉 Keep it up! 👍

    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