The component “collapse” of bootstrap in conflict with isotope filters

[SofiaRF]

I have a website page where i use bootstrap for the layout grid and isotope because i need to filter my content (by years, etc).

Im using the "collapse" component of the bootstrap and when i still do not click in any of the buttons that are filtering my content with isotope, i can see properly the information that was hidden with collapse and than appears, when the information appears the content above changes the position (on height) as its supposed to do.

But, when i click the buttons and isotope filters the content the grid changes - the layout on height is not respected - and when i click to see the content hidden by collapse component by bootstrap the content overlap.

I already searched here at stack overflow, on github, and also on the website, specifically trying mansory column ( https://isotope.metafizzy.co/v1/custom-layout-modes/masonry-column-shift.html ) but its not working as expected.

I will be very grateful if anyone could help me out.

Here i have a simple code to illustrate the issue:
https://codepen.io/sofiarf/pen/VJRrRb

[downFast]

Try to get a callback from bootstrap collapse and then layout isotope again, maybe first run $grid.isotope('reloadItems')