JAVASCRIPT

active js

// 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>

activejs

A frontend Javascript framework