1

I'm trying add transition effect to details element on opening and closing:

details { height: 1em; transition: height 2s; border: 1px solid; overflow: hidden; white-space: pre; } details[open] { height: 6em }
<details> <summary>summary</summary>some hidden text </details>

When it opens, it slowly expands, revealing the hidden text, but when it closes it hides the text instantly then slowly shrinks. I'd like it to hide the text by shrinking.

Is there a way achieve that in CSS only?

Improve this question
2
  • Actually, your example transitions quite well, at least in current Firefox or Chrome/Blink based browsers. I think the main challenge is the height calculation - which can be done with the `grid-column' trick ... but then we have to bypass the default expanding/collapsing behavior. Unless we get a proper detail transition property, we're stuck with JS. Frustrated myself, I came up with this progressive enhancement approach you may check - or improve! Commented Jul 19, 2024 at 4:15
  • 1
    This is going to be easy soon thanks to calc-size(auto). See this tweet: x.com/wesbos/status/1813207251311640895 Commented Jul 19, 2024 at 9:05

1 Answer 1

Reset to default
1

I think you are out of luck with that right now.

Unfortunately, at this time, there's no built-in way to animate the transition between open and closed.

If perfect animation is a big deal for you, you will need to roll your own accordion using generic elements like <div>. Even doing it this way there are still limitations, such as the inability to animate between height: 0 and height: auto.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.