Responsive FAQ Accordion Using Javascript

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

I'm most proud of the fact that I was able to get the javascript out of the way relatively quickly. However, next time I would try to take into consideration how parent/child heights affect layouts.

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

I came across quite a few challenges when going through this challenge, but I will summarize a few:

• When editing innerHTML, the parent element gets destroyed then recreated. This was causing my event listeners to disappear. I just ended up using insertAdjacentHTML instead.
• My headings weren't focusable, so I just had to add a positive tabIndex to them.
• My expand button would only work once. I had to set the variable that evaluates whether the section was expanded or not to within the event listener which was the closure function. This is because only the value was retained and it wouldn't reevaluate.

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

I noticed that since I have a high resolution screen and I'm working fullscreen, the SVG would just cut off around the 75% mark. I ended up making it tile on the x-axis because I didn't want to stretch the image. Is this way to resolve the issue fine or is there a better way?