FAQ Accordion with ARIA attributes and Media Queries

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

I am proud of my JS file that deals with expanding the sections because it helped me get comfortable with JavaScript and also helped me with understanding how to implement the script tag in the head tag of your HTML file. See JS code below:

function updateFAQ(questionElement) {
    const img = questionElement.querySelector("img")
    const faqAnswer = document.getElementById("faqAns" + questionElement.id.slice(7,))

    // Expand or Minimize section based on state of img element
    if (img.src.endsWith("/path/to/svg-plus icon")) {
      img.src = "/path/to/svg-minus icon"
      img.alt = "Minimize Icon" 
      faqAnswer.style.maxHeight = "1000px" // Help with the transition
      faqAnswer.ariaHidden = "false" 
    } else {
      img.src = "/path/to/svg-plus icon"
      img.alt = "Expand Icon"
      faqAnswer.style.maxHeight = "0" // 
      faqAnswer.ariaHidden = "true" 
    }
  }

  faqQstnOne.addEventListener("click", () => updateFAQ(faqQstnOne))
  ... do the same thing for the other faq sections

If I had to do this project differently, I do want to experiment and see if this project is possible with only HTML and CSS.

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

I had initial issues with actually getting the transition for the expanding and minimizing of the answer section. What I first tried was to do transition: height 250ms but found that it wasn't transitioning. My solution to this was to actually use max-height then transition that instead.

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

I noticed that the transition for the expanding and minimizing of the answer was still kinda snappy. So I tried this way in JavaScript:

window.getComputedStyle(faqElement).height

then assign that to my faqAnswer element's height through faqAnswer.style.height. However, the element would not expand or minimize when I click on the question.

My questions are - why my implementation above was causing issues and also how I would go about making the transition for expanding and minimizing smooth using JavaScript.

Thank you in advance for any feedback that you guys have!