FAQ Accordion

What are you most proud of, and what would you do differently next time?

This is the first project I've completed that includes javascript. I've just recently started learning it and still don't really understand it, but am trying. So, I'm really proud of the fact that I was able to complete this project and, even though it's not perfect, it's pretty close.

What challenges did you encounter, and how did you overcome them?

This one was filled with challenges. I know very little javascript, but was able to create most of this project by adapting the steps in this tutorial from @heyitzami442. This helped me me create the functionality of the basic accordion function. The major challenge I faced after that was getting the icons to change with the function, which I struggled with for an hour or two before finally asking Copilot for help. I want to be able to understand js well enough to figure it out myself, but I'm just not there yet.

What specific areas of your project would you like help with?

I wasn't sure the best way to set up the main "card" div, so that when the accordion opened, everything wouldn't shift and change the div height or overflow the div.

Ultimately, I'm okay with the solution I came up with, which was to give the main div for the FAQ card a defined height—tall enough to fit the biggest answer without overflowing—and set the items in the accordion div to space-between to fill out the space. However, I feel that there's probably a better/more standard approach to solving this problem and would love other suggestions.

Additionally, I would have loved to create a smooth transition when the answers open and have them "drop down" from the questions, but after 5 hours on this project, I was spent, lol. So I'd appreciate suggestions on the best way to achieve that. Thanks!