Run script when changing tabs

Design help Custom code
1

Thanks in advance, feeling a bit over my head here.

  • I’m using a script to turn the flexbox items in tab 2 into a masonry layout.
  • This was working fine when I had tab 2 set to main tab (on page load).
  • I’ve realized that when I set tab 1 to be first to load, switching to tab 2 breaks the masonry layout (likely because the script executed on page load when there was no items)

Here is the script, hoping someone can shed some light on how to execute it when I click on tab 2?

// MASONRY GRID FOR PERSONAL PROJECTS
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script>
  //init masonry grid 
var $masonry = $('.masonry').imagesLoaded( function() {
	$('.masonry').masonry({
    itemSelector: '.masonry-item'
  });
});

</script>

Here is my site Read-Only: [LINK][1]

[1]:

2

Hi @Austin_W,

Could you provide your read-only link? Looks like it didn’t come through on the original post.

Also a published link would be great for testing!

Thanks!