JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<details>
  <summary>Click me</summary>
  <p>Here is some content</p>
  <p>Here is some content</p>
  <p>Here is some content</p>
</details>

SCSS

:root {
  interpolate-size: allow-keywords;
}

/* details::details-content {
  opacity: 0;
  transition: opacity 600ms, content-visibility 600ms allow-discrete;
}

details[open]::details-content {
  opacity: 1;
} */

.details::details-content {
    overflow: clip;
    /* transition-duration: 0.3s;
    transition-property: content-visibility, block-size;
    transition-behavior: allow-discrete; */
    transition: block-size 600ms, content-visibility 600ms allow-discrete;
 
}
.details:not(:open)::details-content {
  block-size: 0px;
}