How to solve the problem of transition not working on collapse child elements in Bootstrap.

Bootstrap’s collapse component is very useful, but it can cause problems when trying to apply a transition to a child element. This is because when the collapse is not visible, the element is set to display: none.

To solve this problem, add the following CSS

.collapse:not(.show) { 
 display: block; 
}

This code will make the element display: block instead of display: none even when the collapse is not expanded. This will ensure that transition is applied correctly to the child elements.