Open & Close Transitions with <details>

CSS interpolate-size is rad. Let's use it with the <details> element so this element can join other HTML elements in elegant presentation.

By far, the most common use case I keep seeing for interpolate-size is to transition the <details> element when it opens and closes.

This is your boilerplate starting place.

The Setup #

Start with a <details> element:

<details>
  <summary>Details interpolation example</summary>
  <p>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid dolores,
    distinctio ipsum veritatis magni soluta maiores rerum optio, possimus animi
    eligendi architecto sed placeat quasi quibusdam, nihil odio. Amet, tempore.
  </p>
</details>

Next, it needs a max-inline-size (or placement inside a grid) to prevent the content from being as wide as the page:

details {
  inline-size: 50ch;
}

Next, add interpolate-size to the element so we can transition to block-size: auto:

details {
  @media (prefers-reduced-motion: no-preference) {
    interpolate-size: allow-keywords;
  }
}

Now the tricky parts that make this post valuable.

Select the slot of <details> with ::details-content and describe the closed styles. Take special note to transition: content-visibility 1s allow-discrete:

details {
  &::details-content {
    opacity: 0;
    block-size: 0;
    overflow-y: clip;
    transition: content-visibility 1s allow-discrete, opacity 1s, block-size 1s;
  }
}

Lastly, add the open styles.

details {
  &[open]::details-content {
    opacity: 1;
    block-size: auto;
  }
}

So technically, we're not transitioning the <details> element, we're transitioning the slotted content that goes inside it.

The boilerplate #

Take this and go make awesome things!

details {
  inline-size: 50ch;

  @media (prefers-reduced-motion: no-preference) {
    interpolate-size: allow-keywords;
  }

  &::details-content {
    opacity: 0;
    block-size: 0;
    overflow-y: clip;
    transition: content-visibility 1s allow-discrete, opacity 1s, block-size 1s;
  }

  &[open]::details-content {
    opacity: 1;
    block-size: auto;
  }
}

The Demo #

Try it on this page or try it as an accordion in this notebook!

Note that this effect needs transition-behavior, ::details-content and interpolate-size to work.

Send me a link to the rad <details> elements you make with this‽