<script>
	const details = document.querySelector('#demo-accordion-waapi');
	const content = details.querySelector('#demo-accordion-waapi .details-content');
	const summary = details.querySelector('#demo-accordion-waapi summary');
	let isCollapsing = false;
	let isExpanding = false;
	let animation = null;

	summary.addEventListener('click', (e) => {
	  e.preventDefault();
	  details.style.overflow = 'hidden';
	  details.open ? collapse() : expand();
	});

	function expand() {
	  details.style.height = `${details.offsetHeight}px`;
	  details.open = true;

	  window.requestAnimationFrame(() => {
	    isExpanding = true;
	    if (animation) animation.cancel();

	    const start = `${details.offsetHeight}px`;
	    const end = `${summary.offsetHeight + content.offsetHeight}px`;
	    animation = details.animate({ height: [start, end] }, { duration: 300, easing: 'ease-in-out' });

	    animation.onfinish = () => onFinish(true);
	    animation.oncancel = () => (isExpanding = false);
	  });
	}

	function collapse() {
	  isCollapsing = true;

	  window.requestAnimationFrame(() => {
	    if (animation) animation.cancel();

	    const start = `${details.offsetHeight}px`;
	    const end = `${summary.offsetHeight}px`;
	    animation = details.animate({ height: [start, end] }, { duration: 300, easing: 'ease-in-out' });

	    animation.onfinish = () => onFinish(false);
	    animation.oncancel = () => (isCollapsing = false);
	  });
	}

	function onFinish(isOpen) {
	  details.open = isOpen;
	  animation = null;
	  isCollapsing = false;
	  isExpanding = false;
	  details.style.height = null;
	  details.style.overflow = 'visible';
	}
</script>

<details id="demo-accordion-waapi">
	<summary>Details</summary>
	<div class="details-content">
		<p>This is an accordion with more</p>
		<p>I'm adding more stuff here to make animation look nicer.</p>
	</div>
</details>