Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Masonry and tabs conflict issue Reply To: Masonry and tabs conflict issue

#208155
jekkilekki
Participant

Got it working in Foundation. Here’s a CodePen sample: http://codepen.io/jekkilekki/pen/YywQag

Easier than I thought. Basically, rerun Masonry every time a different Tab is clicked:

// Reinitialize masonry inside each panel after the relative tab link is clicked - 
$('.tab-title a').on('click', function() {
  // do async to allow menu to open
  setTimeout( function() {
     $('.masonry-container').masonry({
    itemSelector: '.masonry-item'
     }, 500);
  });
});