: The Details disclosure element - HTML: HyperText Markup Language | MDN

MDN
#1

So I came across this text in the MDN docs:

" You can use CSS to style the disclosure widget, and you can programmatically open and close the widget by setting/removing its [ open ] attribute. Unfortunately, at this time there’s no built-in way to animate the transition between open and closed. "

Although my approach may not be the “correct” one, I was able to partially achieve what I wanted. If you have developed alternative solutions, feel free to leave a comment below.

   details{
    overflow: hidden;
    outline: 5px solid tomato;
    padding: 10px;
    height: 5rem;
    max-height: 200px;
    transition: all .5s ease-in-out;
}

details[open]{
    width: fit-content;
    height: 180px;
}

Initially, my solution involved setting a fixed height for the <details> element that changes when it’s toggled open. By setting the overflow property to hidden , I was able to hide and reveal the content with a height transition effect. I acknowledge that this solution may have some issues with responsiveness. However, this can be addressed by using min-height instead of fixed heights.

Any feedback is welcome,
Thanks :slight_smile: