FAQ-Accordian Card

Solution retrospective
1)How do i merge the two images ie the box image and person image as shoen in the design file. 2)Im still struggling with java script so somebody pls help with the script code its not working:/.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Jexinte
Hello ,
Above all organize your files in separate folder it's more meaningful when we need to find something specific ( When I download your code I had to rewrite almost all img files path )
There is a more simple way to do what is ask on the challenge by using <details> and <summary> tag that have the effect that you need to toggle a question and her answer without js ! ( Javascript is not a requirement to use I learn that by asking on the website slack)
More informations here : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
Then on css you can specify what to do when a question is open by targeting the "open" attribute more details to here :
https://css-tricks.com/put-a-background-on-open-details-elements/
I'm just saying that but I think that If you are stuck on your code try to not check the code of others now just say where you're stuck and I think you'll get a better understanding and better answer on why it's not working ( This is how some people learned me ) .
I forgot in your js code you're trying to show all answer with the [i] index but you haven't loop through them so they are gonna be always undefined ! You could know that just by using a console.log(ans[i]) !
In hope it helps !
Marked as helpful - @subu-v
Regarding images, Use this property on the bigger image.
transform:translateX(-values); This will move the image on the left, tinker with the value untill you archeive the desired output.
As for the box image, use absolute positioning on it and make your container(parent of all element) position:relative;
position:absolute; top: some value; left: some value; transform:translate(-50%,-50%); //tinker with the values untill the desired outcome.
To make the box to appear on top of the bigger image with the women. Use z-index property on the box image.
z-index:-1;
As for the functionality, please visit mygithub repository where i added the required functionality in 7 lines of code. https://github.com/subu-v/faq-accordian-component.git
If you have any doubts, feel free to ask.
Marked as helpful
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