Animating the <details> element

Features

• Animation effect on the opening and closing of HTML <details> element.
• Animation speed (duration) and easing effects (easing) can be customized.
• In prefers-reduced-motion: reduce environments, no animation is performed. (Version 4.2.0 or later)

Browser support

Using the ShadowRoot: adoptedStyleSheets. (Can I use...)

• Firefox 101+
• Safari 16.4+
• Chrome 73+
• Edge 79+

Demo

• Demo page

Examples

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

  detailsAnimation(document.querySelectorAll('.js-details-animation')); // `getElementById()` or `getElementsByClassName()` or `getElementsByTagName()` or `querySelector()` or `querySelectorAll()`
</script>

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

* @w0s/shadow-append-css is no longer required since version 7.0

HTML attributes

Sample CSS

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 {
  --summary-icon-rotate: 0deg;

  &:is(:not([open]), [data-pre-open='false']) {
    --summary-icon-rotate: -90deg;
  }

  & > summary {
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }

    &::before {
      display: inline flow-root;
      margin-inline-end: 0.5em;
      content: '▼';
      rotate: var(--summary-icon-rotate);
    }
  }
}

* By including both :not([open]) and [data-pre-open='false'] in the selector's condition, we can handle both cases when JavaScript works correctly and when it does not (e.g. script disabled environment).

* Safari(26) does not support list-style for the <summary> element, so use the ::-webkit-details-marker pseudo-element. (Can I use...)