This was a fun challenge in which I learned how to use and style the <details> and <summary> HTML elements.
I also added a bobbing animation to the floating cube (with a small touch from the drop-shadow CSS function) and animated the linear-gradient background with this helpful tool.
I'm quite happy with the result! 😊
Any feedback on both the design and code is welcome and appreciated! 😃
Happy coding! 😁
EDIT: For some reason, the details marker on each of the FAQs is showing up in the screenshot (even though I set their display to none) but they're gone on the actual page, as far as I can tell.
I feel like I am getting more comfortable with JS but at the same time not at all haha I am happy with the results I was able to get but I'm not sure if my script is efficient or not. I did notice that to get each answer to drop down for the first time, you have to double click, but a single click will open/close after the initial drop down. Would love some pointers there!
I also feel like some of the positioning choices I made are a little questionable. I would have really liked if I could have gotten the answers to drop down without shifting the entire list both up and down. Having the top question in a fixed position and all the answers shifting downward would have been choice. To mitigate on overflow, I used js to ensure only one answer could dropdown at a time, selecting a different question would close the currently opened answer. I was also trying to find a way to slow the display transition for the answer divs but was unable to figure out a way.
Any tips/tricks/pointers/critiques are welcome and greatly appreciated!
Good work, boss! I was doing this solution myself as well and had a really hard time with javascript. After trying out other user's code, I have found that your javascript code was the cleanest and it was easy for me to understand. So, I decided to use it on my solution. You should check it out!
