@lukeSchwade
Posted
If you want to dip into JS, I used this tutorial which was pretty straightforward, and was a great way to learn about constructing objects.
A bug I ran into was the code uses element.offsetHeight, which doesn't include the margins of elements and the animation will be jerky if your <summary> and content is separated by a margin, so to fix it you have to add the elements margins into the calculation (hardcoded or otherwise), eg
const endHeight = `${this.summary.offsetHeight + this.content.offsetHeight}px`;
had to be changed to
const endHeight = `${this.summary.offsetHeight + this.content.offsetHeight + 16}px`;
(16px was height of my margin on <summary>, will be different if your elements have different margins in different places)
