// isotope cdn
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
// init Isotope (portfolio-items)
var $grid = $('.grid').isotope({ });
// filter items on button click
$('.filter-button-group').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue });
});
// add class active in button
$('.portfolio-filter button').click(function () {
$(this).addClass("active");
$(this).siblings().removeClass('active');
});
//isotope button list html
<div class="button-group filter-button-group">
<button data-filter="*">show all</button>
<button data-filter=".metal">metal</button>
<button data-filter=".transition">transition</button>
<button data-filter=".alkali, .alkaline-earth">alkali & alkaline-earth</button>
<button data-filter=":not(.transition)">not transition</button>
<button data-filter=".metal:not(.transition)">metal but not transition</button>
</div>
// isotope html containt
<div class="grid">
<div class="element-item transition metal">...</div>
<div class="element-item post-transition metal">...</div>
<div class="element-item alkali metal">...</div>
<div class="element-item transition metal">...</div>
<div class="element-item lanthanoid metal inner-transition">...</div>
<div class="element-item halogen nonmetal">...</div>
<div class="element-item alkaline-earth metal">...</div>
...
</div>