Loading: all portfolios stacked in the hidden tabs

Hi,

I’m trying to display several portfolio grids on the same page, but not at the same time. My goal is to let the user choose what filters should appear. Let’s say my portfolios are filtered by size, color and shape. I want the user to be able to show only the shape filters, or only the color filters, and not have all three groups at the same time, which makes a quite long list.

For this I found two solutions:
1. having a separate page for each filters group, but that means slow navigation and lots of loading, when the portfolios are always the same.
2. having tabs on the page, and each tab shows a portfolio shortcode with the right filters selected.

I wanted to get solution 2 working. The fact is, when I open my page, the grid in the first tab works, but the grids of the hidden tabs are all stacked, all images one above the other. It seems the initially hidden grids/masonry don’t load at the right time, but I don’t know much about js and so, and I can’t think of a solution. Is there a way to make this work correctly?

Also, I think my solution is a bit brute force, and maybe we could find something cleaner. If you have any suggestion on this, I’m interested!

Thank you for your help!
Zoé.