2

I used the isotope from the site http://isotope.metafizzy.co/ and implemented a method to use load more items by pressing a button. The problem is that when i hide the elements to display only the initial number of elements, my isotope grid won't scale. If i press the show more button, the layout accurately scales.

It seems that 

  $grid.isotope('hideItemElements', $(this)).isotope('layout');

but 

 $grid.isotope('revealItemElements', $(this)).isotope('layout');

works just fine. Can you please tell me what am i doing wrong?

Here is a demo in codepan: http://codepen.io/laura-chesches/pen/RKPWGo

Laura Chesches
  • 2,493
  • 1
  • 19
  • 15

1 Answers1

6

I managed to resolve my own problem and make a functional load more (show more) button. Here is the working code:

http://codepen.io/laura-chesches/pen/xgEOpY

It seems that i shouldn't have used arrangeComplete event, i just needed to create a new function in which i used:

 var itemElems = $grid.isotope('getFilteredItemElements');
Laura Chesches
  • 2,493
  • 1
  • 19
  • 15
  • THANK YOU! This seems like such a simple problem to solve but has been driving me crazy for far too long... this is perfect for what I need! – PromInc Feb 18 '21 at 16:18