Not Found
Request path contains unescaped characters
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

Simple FAQ page using vanilla JS

P
Hana• 910

@Hanka8

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


Hi,

I cant figure out how to make part of the picture hidden while the box is visible. Also, I dont understand why my transition effect doesnt work.

Any other suggestions about better solution are welcome!

Thanks :-)

Community feedback

Renan Tiscoski• 1,260

@DonUggioni

Posted

Hi Hana,

Regarding your transitions, I believe it's not working because there's really nothing to make a transition from. It just goes from display: none to visible.

You'd have to add some kind of animation in order to apply a transition, like hide the answer behind the question and make it slide down once you add the class for it using JS.

Other than that it looks good on full screen.

Keep it up!

0
Rachael• 610

@RMK-creative

Posted

Hi Hana, nice job :)

Regarding your questions: If you add overflow: visible; on your .card I think you'll get what you're trying to do with the image. I see you have it applied in your media query, but it doesn't work on screens larger than 1044px.

What is the transition effect that you're trying to add?

0

P
Hana• 910

@Hanka8

Posted

@RMK-creative Hi Rachael, thank you for your suggestions ☺

"Overflow" must be applied on parent element, so I have to put that "orange box with @ on it" outside of the div. Then I have to apply "position: absolute" and hardcode its position. I believe that there is a better solution for this. Even though that way it works.

I wanna ad transition effect on the question text, that is appearing after clicking the question.

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