jQuery Isotope first filtering doesn't seem to work

Question

I'm facing an issue here. I'm using a similar code for filtering in two pages

• https://www.tallengestore.com/collections/vincent-van-gogh

• https://www.tallengestore.com/products/bani-thani-as-radha-art-by-nihal-chand

$('#filter a')[<number>].click() is the triggering mechanism. On page load it is triggered after 10 seconds automatically or can be manually intervened before 10 seconds

When the page(s) loads a default set of items in $('.portfolio_block') are shown and the rest are display:none

On the first page, the first filtering works properly. Items are added in filteredItems, elements are hidden, animation shows up and elements are displayed. No problems here

But on the second page, items are added and elements are hidden. Mechanism stops here. This only happens on the first trigger. From the second trigger on wards, it goes back to functioning properly.

$('.portfolio_block').isotope({ filter: $(this).attr('data-option-value')}) that's how I'm using isotope.

Any help will be great.

PS I've tried using $('.portfolio_block').isotope() but it just messes up the layout on page load.

PPS I've added console logging of isotope data for debugging purposes.

Isotope - http://isotope.metafizzy.co/filtering.html

Answer 1

Surprisingly or unknowingly, jquery-isotope has to be initiated with all the elements before anything. Adding the following on document ready fixes the problem.

var $portfolioBlock = $('.portfolio_block').isotope({
   itemSelector: '<common_class_for_all_elements_requiring_isotope>',
   filter: '<initial_filtering_class>'
});