FAQ-accordion-card Solution

Hello everyone

This was a challenging project, At first i thought it was just an easy position absolute and that's all but positioning it wasn't as easy as i had thought. Also i don't know java script and DOM manipulation so it helped me look into it.

I made it a while ago, i think I'm using classes to switch between mobile and desktop pictures. That's because at the time of making it i didn't know how picture tag works. However i know it now and I've used it another challenge which I'll submit later.

I finished it and it looks okay i guess, but I'm not really satisfied with it. Firstly, the image is positioned at the center so it snaps when opening and closing the accordion in order to maintain it centered position, sames the case with background as its size is bigger then the container but i think that's okay. Its the image that i have a problem with. Second, I feel like this problem would be solved if we can open only 1 accordion at a time, but i don't know how to make the logic for that in JavaScript. I also wanted to add an opening-closing animation by changing the height of the panel, i tried doing it but i was tired so i didn't put enough effort.

If you find something I can improve let me know! Thanks!