• Demo page

<script type="importmap">
  {
    "imports": {
      "@w0s/details-animation": "..."
    }
  }
</script>
<script type="module">
  import DetailsAnimation from '@w0s/details-animation';

  for (const targetElement of document.querySelectorAll('.js-details-animation')) {
    new DetailsAnimation(targetElement);
  }
</script>

<details class="js-details-animation"
  open=""
  data-duration="1000"
  data-easing="linear"
>
  <summary>Caption Text</summary>
  <p>Contents text</p>
</details>

open [optional]

Whether the details are visible. (open attribute of <details> Element)

data-duration [optional]

The iteration duration which is a real number greater than or equal to zero (including positive infinity) representing the time taken to complete a single iteration of the animation effect (See OptionalEffectTiming for details). If omitted, the default value is 500(ms).

data-easing [optional]

The timing function used to scale the time to produce easing effects (See OptionalEffectTiming for details). If omitted, the default value is ease.

In order to achieve animation, the timing of setting the open attribute of the <details> element is delayed. Therefore, the viewlet icon of the <summary> element should be determined by the data-pre-open attribute.

details[data-pre-open] > summary {
  list-style: none;
}

details[data-pre-open] > summary::-webkit-details-marker {
  display: none;
} /* Safari(17) doesn't support `list-style`, so you need to use the `::-webkit-details-marker` pseudo-element <https://caniuse.com/mdn-html_elements_summary_display_list_item> */

details[data-pre-open] > summary::before {
  margin-inline-end: 0.5em;
  display: inline-block;
  content: '▼';
}

details[data-pre-open='false'] > summary::before {
  transform: rotate(-90deg);
}

* Don't forget to add details[data-pre-open] to all selectors. This will avoid styling in environments where JavaScript is disabled.