Trigger a window resize event in order to resize the iframe on a group of tabbed collections

Technical Q&A
1

I am using Bootstrap 5 and the Shopify Buy button for collections. I have four collections, each neatly placed in a Bootstrap tab. The problem is that unless I set a min-height on all iframes everything that is not in the active tab on the first page load is cut off.

What I’ve noticed is that when I open a tab that is not active on load, then resize the window, the iframe resizes and shows all the items in that collection.

How do I trigger that resize event on a button click so that the iframe sets the proper height? I’ve tried the below but it doesn’t work:

$("li.nav-item").click(function(){
      $(window).trigger("resize");
});