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 theoverflow
property tohidden
, 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 usingmin-height
instead of fixed heights.
Any feedback is welcome,
Thanks