FAQ accordion with HTML CSS and JS

Question: Is there a way to add a transition to an element's height without actually giving it a specific height?

I wanted to add a smooth transition to the accordion elements that are hidden and are shown when you click on the header, but unfortunately I wasn't able to add that sort of animation without giving every div a specific height and with pure CSS and JS.

Here's an example of what I tried but didn't work:

.item-body {
height: 0;
transition: height 2s;
}

.visible {
height: 100%;
}

(Don't know how but bootstrap 5 does have that animation in its accordions). The reason why I don't wanna set a specific height is because some elements have different heights and I only used one class. I hope someone can help me with that :)

And aside from that, any recomendations regarding to writing JS code would be very much appreciated, it's the second challenge I complete using JS so I'm new to this.