details-animation Demo

no attribute

<details class="js-details-animation">
  <summary>Caption Text</summary>
  <p>Contents text text ...</p>
</details>
Caption Text

Contents text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

open attribute

<details class="js-details-animation" open="">
  <summary>Caption Text</summary>
  <p>Contents text text ...</p>
</details>
Caption Text

Contents text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

data-duration, data-easing attribute

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

Contents text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Vertical writing

writing-mode: vertical-rl

キャプション

テキストテキストテキストテキストテキスト

writing-mode: sideways-lr

* Safari 18.3 is not support writing-mode: sideways-* (As of Feb. 2025), so please view in Firefox or Chrome. (Can I use...)

キャプション

テキストテキストテキストテキストテキスト