Dynamic category filter

archive.php

<?php $category = get_the_category(); ?>
<div class="col-md-6 filter <?php echo esc_attr( $category[0]->slug ); ?>">
  // Content
</div>

content-product.php

<div <?php post_class( 'filter col-sm-6 col-md-4' ); ?>>
</div>

script.js

  $.fn.categoryFilter = function(selector){
    this.click( function() {
      var categoryValue = $(this).attr('data-filter');
      $(this).parent().addClass('active').siblings().removeClass('active');
      if(categoryValue=="all") {
        $('.filter').show(1000);
      } else {
        $(".filter").not('.'+categoryValue).hide('3000');
        $('.filter').filter('.'+categoryValue).show('3000');
      }
    });
  }
  $('.category-filter .category-button').categoryFilter();