FAQ-Accordian Card

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 !

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.