Skip to content
Submitted almost 4 years ago

React.js, html and css

Kacper•205
@gacbur
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 everyone! I need some help:

  1. These SVG's, as You can see they are not going on top of the background and getting cut off where the white box ends, how can I fix that? tried z-index but doesn't work, maybe I messed up something else?
  2. As you can see the accordion Items there, can be opened all at the same time, what can I do in React so they would open one at a time and other stay closed?

Thanks for taking the time to help me :)

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted almost 4 years ago

    Hey, Kacper! 👋

    Good work on this challenge! Your solution looks good and is responsive and the accordion card works well! 👏

    Just a tip, but you don't have to make it so that opening one tab closes another active tab in the accordion. Some suggest that allowing users to open multiple tabs at a time is better for UX, since tabs won't automatically close when the users don't want them to. It may also be a matter of preference, though. 😉

    Keep coding (and happy coding, too)! 😁

    1
    Kacper•205
    @gacburPosted almost 4 years ago

    @ApplePieGiraff Hello ApplePieGiraffe, Thank you for the feedback! :) appreciate you!

    0
  • Web Frog•1,840
    @MasterDev333Posted almost 4 years ago

    Hi, Great work so far.

    1. About cube box, it's impossible to show following your method. Z-index won't work, because you can't see cube due to overflow I suggest you don't use background-image for cube, please use img element and set position absolute then z-index.
    2. about accordion issue, please add active class on accordion item. And when you click, remove old accordion-item active class and set active to new one. Here's my solution. https://faq-eight.vercel.app/ Hope this helps. Happy coding~ :)
    1
    Kacper•205
    @gacburPosted almost 4 years ago

    Thank you so much for your answer, this is helpful, appreciate you :)

    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