<details>
  <summary>Toggle</summary>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam incidunt itaque accusantium, quis molestiae quia provident quas, rem consequuntur, fugiat placeat aperiam quo non! Aspernatur error et asperiores velit harum?
</details>
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 2s;
}

if (document.startViewTransition) { // (check for browser support)
  document.addEventListener('click', function (event) {
    if (event.target.matches('summary')) {
      event.preventDefault() // (we’ll toggle the element ourselves)
      const details = event.target.closest('details')
      document.startViewTransition(() => details.toggleAttribute('open'))
    }
  })
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.