{
  "$type": "site.standard.document",
  "description": "Your boilerplate starting place for <details> transitions",
  "path": "/open-and-close-transitions-for-the-details-element",
  "publishedAt": "2024-09-25T22:11:37.020Z",
  "site": "at://did:plc:jnj7wcwuvspxdsipmecmx7rs/site.standard.publication/self",
  "tags": [
    "blog",
    "css"
  ],
  "textContent": "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: &#x3C; details > &#x3C; summary >Details interpolation example&#x3C;/ summary > &#x3C; 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. &#x3C;/ p > &#x3C;/ 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 : 50 ch ; } 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 { &#x26; : :details-content { opacity: 0 ; block-size : 0 ; overflow-y : clip ; transition : content-visibility 1 s allow-discrete , opacity 1 s , block-size 1 s ; } } Lastly, add the open styles. details { &#x26;[ 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 : 50 ch ; @ media ( prefers-reduced-motion : no-preference ) { interpolate-size : allow-keywords ; } &#x26;:: details-content { opacity : 0 ; block-size : 0 ; overflow-y : clip ; transition : content-visibility 1 s allow-discrete , opacity 1 s , block-size 1 s ; } &#x26;[ open ]:: details-content { opacity : 1 ; block-size : auto ; } } The Demo # Try it on this page or try it as an accordion in this notebook ! What is my favorite CSS color? deeppink! Note that this effect needs transition-behavior , ::details-content and interpolate-size to work. See the Pen by Adam Argyle ( @argyleink ) on CodePen . Send me a link to the rad <details> elements you make with this‽",
  "title": "Open & Close Transitions with <details>"
}