Перезагрузка контейнера для кладки после показа новых предметов не работает?

Question

имеющий немного проблемы здесь. Мне нужно иметь кучу предметов, скрытых при первом загрузке сайта, и появляться только после нажатия кнопки. В верхней части моего doc.ready я это:

$('#showall').hide(); 

успешно скрывает карты мне нужно скрытые (очевидно). Затем я попытался отобразить их и перезагрузить контейнер кладки, но не кажется, что это будет работать ..

var container = document.querySelector('.comparison-cards'); 
var msnry = new Masonry(container, { 
    // options 
    itemSelector: '.card', 
    gutter: 20, 
    isFitWidth: true 
}); 

$('.button').click(function() { 
    $('#showall').show(); 
    msnry.reloadItems(); 
}); 

Есть ли причина, почему это не будет работать? Я делаю что-то неправильно? Есть лучший способ сделать это? Для выяснения, карты, которые я скрыл, имеют тот же класс, что и у карт, с которых я первоначально показываю только другой идентификатор.

Спасибо за любую помощь, которую вы можете предоставить! :-)

Answer 1

мне удалось решить эту проблему с помощью комбинации с использованием Jquery шоу() и скрыть() и каменную кладку удалить() и AddItems():

$('.button').click(function() { 

    if (buttonClicked == false) { 
     $(testArray).show(); 
     msnry.addItems(testArray); 
     $(container).append(testArray); 
     msnry.appended(testArray); 
     msnry.reloadItems(); 
     msnry.layout(); 
     $('.button').html('SHOW LESS'); 
     buttonClicked = true; 
     console.log(buttonClicked); 
    } else { 
     msnry.remove(testArray); 
     msnry.layout(); 
     $('.button').html('SHOW ALL'); 
     buttonClicked = false; 
     console.log(buttonClicked); 
    } 

});