@CoderHaqiim
Posted
Congratulations on completing your project. This is the longest solution for this challenge that I've seen apart from mine. I'll suggest you create reusable functions. Also, you can select every item with same class with the querySelectorAll. It acts like an array, and you can use the forEach method on it. The shortest solution I've seen so far made use of
<details>
<summary>
The question
</summary>
<p>The answer</p>
</details>
Turns out the summary tag automatically creates a drop down that toggle when clicked. Most solutions, though, didn't close previously opened answers, and I guess that was why their solutions were significantly shorter.
A little parting tip. To keep the first answer open like in the design, you can select the element that triggers the event that opens it, and add .click() to it. i.e
onload =()=> selectedElement.click()
This automatically clicks the element when the document loads. You may check my solution to see if you find anything of interest. Cheers! Happy coding!
Marked as helpful
@JS-Law
Posted
@CoderHaqiim Hey thanks for the advice,
I definitely could have condensed all of that code in various ways but instead opted to submit so I can look back and laugh at the monolith I'd created. Once I had seen the forEach method I laughed at myself and the lines of code I had already written.
Thank you for the tips!
