<details>
  <summary>Accordion item 1</summary>
  Accordion 1 content
</details>
<details>
  <summary>Accordion item 2</summary>
  Accordion 2 content
</details>
<details>
  <summary>Accordion item 3</summary>
  Accordion 3 content
</details>

details > summary::marker,
details > summary::-webkit-details-marker {
  display: none;
}

class Accordion {
  constructor(el) {
    this.el = el;
    this.summary = el.querySelector('summary');
    this.content = el.querySelector('.content');
    this.animation = null;
    this.isClosing = false;
    this.isExpanding = false;
    this.summary.addEventListener('click', (e) => this.onClick(e));
  }

  onClick(e) {
    e.preventDefault();
    this.el.style.overflow = 'hidden';
    if (this.isClosing || !this.el.open) {
      this.open();
    } else if (this.isExpanding || this.el.open) {
      this.shrink();
    }
  }

  shrink() {
    this.isClosing = true;
    //we need to grab the height of the summary and the overall element before we shrink it.
    const startHeight = `${this.el.offsetHeight}px`;
    const endHeight = `${this.summary.offsetHeight}px`;
    //stop previous animations.
    if (this.animation) {
      this.animation.cancel();
    }

    //start the new animation, starting at full height and reducing down to the minimum
    this.animation = this.el.animate({
      height: [startHeight, endHeight]
    }, {
      duration: 400,
      easing: 'ease-out'
    });


    this.animation.onfinish = () => this.onAnimationFinish(false);
    this.animation.oncancel = () => this.isClosing = false;
  }

  open() {
    //important step, we grab the current height and set it, this could be mid animation so we need to set it each time.
    this.el.style.height = `${this.el.offsetHeight}px`;
    this.el.open = true;
    window.requestAnimationFrame(() => this.expand());
  }

  expand() {
    this.isExpanding = true;
    const startHeight = `${this.el.offsetHeight}px`;
    const endHeight = `${this.summary.offsetHeight + this.content.offsetHeight}px`;

    if (this.animation) {
      this.animation.cancel();
    }

    this.animation = this.el.animate({
      height: [startHeight, endHeight]
    }, {
      duration: 400,
      easing: 'ease-out'
    });
    this.animation.onfinish = () => this.onAnimationFinish(true);
    this.animation.oncancel = () => this.isExpanding = false;
  }

  onAnimationFinish(open) {
    this.el.open = open;
    this.animation = null;
    this.isClosing = false;
    this.isExpanding = false;
    this.el.style.height = this.el.style.overflow = '';
  }
}

document.querySelectorAll('details').forEach((el) => {
  new Accordion(el);
});

// create a new Tota11yAccordion, passing the wrapper element and then the options.
new Tota11yAccordion(el,{
      // close other items in the accordion when one is opened.
      closeOthers: true, // default false

      // set the duration of the animation
      duration: 800, // default 400

      // set the animation easing
      easing: 'ease-in' // default ease-out
  });