FAQ accordion

Community feedback

• 

  Luke•140

  @lukeSchwadePosted 6 months ago

  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)

  0