FAQ-accordion

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

I'm most proud of how clean and consistent the FAQ Accordion turned out, especially the responsive design and the smooth toggling behavior for opening and closing answers. It was really satisfying to ensure the icons switched correctly between plus and minus, and that everything stayed accessible and visually balanced across different screen sizes.

Next time, I would focus more on adding small transition animations (like a smooth slide down/up effect when answers open and close) to make the experience feel even more polished. I’d also organize my JavaScript a bit more modularly for easier scalability if I wanted to add more FAQs dynamically.

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

One big challenge was controlling the visibility of the answers and synchronizing the icon changes (from plus to minus) without using a "toggle" icon by default. Instead, each question had its own static image, so I needed to manually switch the src attribute of the images depending on the FAQ item's open/close state.

Another challenge was making sure the first FAQ item didn’t show an unnecessary top border. Initially, using :first-child and :first-of-type didn't fully solve the issue because of how the layout was structured, but with careful CSS targeting and structure adjustments, I was able to fix it cleanly.

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

I would love feedback on two things:

How to best add smooth open/close animations to the answer sections without causing layout shifts or performance issues.

If there are more efficient or scalable ways to structure the JavaScript, especially if I wanted to make the FAQ list dynamic in the future (like fetching questions/answers from a JSON file instead of hardcoding them in HTML).