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.