This is an old issue that seems to have a clear cause, and a clear fix.

The collapsible panels content (class collapse-content) set their heights so they can hide with style="height: 0px;" and activate the collapse transition.

However the problem is that when they expand to show their content, they do so by changing the height to e.g., style="height: 400px;" (pre-calculating it before expanding or by some other mean). That's OK if the content is never going to be dynamic, but it also makes their usage A LOT less useful.

For example... you cannot properly use nested collapsible panels (which are easy to create by just wrapping the nested panels with ::: ... :::), because everything will get cut at the fixed height set at the time of expansion. So while functional and cool, nested panel are unusable... just because of that fixed height.

I don't know the code of the expansion, but if it would remove the height on expansion, and put whatever is the current height back before the collapsing, that would solve the problem very easily and allow the nesting, which will be absolutely great!

@geoffreymcgill What do you think?