# Smooth Open and Close Animation for Details Blocks

> Animates Details (accordion) blocks so the answer slides open and closed smoothly instead of jumping, in browsers that support animating to auto height.

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: details, accordion, animation, css
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-smooth-details-animation/

## Code

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

    details::details-content {
        height: 0;
        overflow: clip;
        transition: height 0.3s ease, content-visibility 0.3s allow-discrete;
    }

    details[open]::details-content {
        height: auto;
    }
}
```

## Notes

Supported in recent Chrome and Edge; other browsers open instantly as before. Off for visitors who prefer reduced motion.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Smooth Open and Close Animation for Details Blocks" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/