Как добавить и удалить пустое пространство под элементом stampt

Question

Я использую BOOTSTRAP и ISOTOPE, чтобы сделать фильтрацию в группе элементов. У меня есть кнопка свернуть (красная ячейка в примере), чтобы скрыть и показать фильтры. Моя идея заключается в том, что я открываю сложенные фильтры, чтобы получить пустое пустое пространство под красной ячейкой до конца, а вместо этого 3 зеленых cols они должны стать только 2. После того, как я скрою фильтры, он снова станет в 3 зеленые кол. Вот пример моего кода https://jsfiddle.net/tqLdre3s/2/

$stampElem = $('.filter-box'); 
var $Grid = $('.list-container').isotope({ 
    itemSelector: '.content-box', 
    layoutMode: 'masonry', 
    stamp: $stampElem 
}); 
$('.list-container').on('click', '.filter-link', function(e) { 
    e.preventDefault(); 
    $Grid.isotope('stamp', $stampElem); 
    var filterValue = $(this).attr('data-filter'); 
    $Grid.isotope({ filter: filterValue }); 
}); 
$Grid.isotope({ filter: '.start-box-filters' });` 

Answer 1

Здесь вы идете:

jsFiddle

добавить этот CSS

.gigante{height:270px;} 

JS

$stampElem = $('.filter-box'); 
var $Grid = $('.list-container').isotope({ 
    itemSelector: '.content-box', 
    layoutMode: 'masonry', 
    stamp: $stampElem, 
    masonry: { 
     // columnWidth: ".filter-box" 
    } 
}); 

$(' a.btn').on('click', function() { 
$('.filter-box').toggleClass('gigante'); 
// trigger layout after item size changes 
$Grid.isotope('layout'); 
}); 
$('.list-container').on('click', '.filter-link', function(e) { 
    e.preventDefault(); 
    $Grid.isotope('stamp', $stampElem); 
    var filterValue = $(this).attr('data-filter'); 
    $Grid.isotope({ filter: filterValue }); 
}); 
$Grid.isotope({ filter: '.start-box-filters' });