Как сделать фильтр с помощью javascript / jquery

$(document).ready(function(){ 
  $(".button").click(function(){ 
    var value = $(this).attr("data-filter"); 
    var elem = $(".elem"); 
    if(value == "all"){ 
      $(elem).show("500"); 
    } 
    else{ 
      $(elem).not("."+value).hide("500"); 
      $(elem).filter("."+value).show("500"); 
    } 
  }); 
})

*{ 
  margin:0; 
  padding:0; 
  list-style:none; 
  box-sizing:border-box; 
} 
 
.clear,.clear:before,.clear:after{ 
  content:""; 
  display:block; 
  clear:both; 
} 
 
ul,.items{ 
  margin:50px auto; 
  width:80%; 
} 
 
ul li{ 
  float:left; 
  padding:10px 30px; 
  background:#ccc; 
  font-weight:900; 
  font-family:helvetica; 
  margin:0 10px; 
  cursor:pointer; 
} 
 
ul li.site-i:focus{ 
  background:tomato; 
} 
 
ul li.foto-i:focus{ 
  background:lightblue; 
} 
ul li.template-i:focus{ 
  background:lightgreen; 
} 
ul li.all-i:focus{ 
  background:#ccc; 
} 
li:focus{ 
  outline:none; 
  border:none; 
  color:#fbfbfb; 
} 
.item{ 
  width:30%; 
  height:100px; 
  float:left; 
  margin:3px; 
  text-align:center; 
  line-height:100px; 
  font-size:1.6em; 
  color:#fbfbfb; 
  font-weight:900; 
  font-family:Helvetica; 
  font-variant:small-caps; 
} 
.site{ 
  background:tomato; 
} 
.foto{ 
  background:lightblue; 
} 
.template{ 
  background:lightgreen; 
} 
@media (max-width:1200px){ 
  ul li{ 
    zoom:.9; 
  } 
   
  .item{ 
    zoom:.6; 
  } 
} 
@media (max-width:956px){ 
  ul li{ 
    zoom:.8; 
  } 
   
  .item{ 
    zoom:.5; 
  } 
} 
@media (max-width:768px){ 
  ul{ 
    margin:10px auto; 
  } 
  ul li{ 
    margin-left:0; 
  } 
  .items{ 
    margin:10px auto; 
  } 
  .item{ 
    width:45%; 
    zoom:.45; 
  } 
} 
@media (max-width:480px){ 
  ul{ 
    margin:10px auto; 
  } 
  ul li{ 
    zoom:.6; 
  } 
  .items{ 
    margin:10px auto; 
  } 
  .item{ 
    width:45%; 
    zoom:.35; 
    font-size:3em; 
  } 
} 
@media (min-width:1200px){ 
  ul li{ 
    zoom:.8; 
  } 
   
  .item{ 
    zoom:.5; 
  } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="wrapper">  
  <ul class="clear"> 
    <li class="button all-i" data-filter="all" tabindex="-1">all</li> 
    <li class="button site-i" data-filter="site" tabindex="-2">site</li> 
    <li class="button foto-i" data-filter="foto" tabindex="-3">foto</li> 
    <li class="button template-i" data-filter="template" tabindex="-4">template</li> 
  </ul> 
  <div class="items clear"> 
 
    <div class="item elem site">site</div> 
    <div class="item elem foto">foto</div> 
    <div class="item elem site">site</div> 
    <div class="item elem foto">foto</div> 
    <div class="item elem template">template</div> 
    <div class="item elem foto">foto</div> 
    <div class="item elem template">template</div> 
    <div class="item elem site">site</div> 
    <div class="item elem template">template</div> 
    <div class="item elem site">site</div> 
    <div class="item elem foto">foto</div> 
    <div class="item elem site">site</div> 
    <div class="item elem foto">foto</div> 
    <div class="item elem template">template</div> 
    <div class="item elem foto">foto</div> 
    <div class="item elem template">template</div> 
    <div class="item elem site">site</div> 
    <div class="item elem template">template</div> 
  </div> 
</div>

var fActive = ''; 
 
function filterColor(color) { 
  if (fActive != color) { 
    $('div').filter('.' + color).slideDown(); 
    $('div').filter(':not(.' + color + ')').slideUp(); 
    fActive = color; 
  } 
} 
 
$('.f-red').click(function() { 
  filterColor('red'); 
}); 
$('.f-blue').click(function() { 
  filterColor('blue'); 
}); 
$('.f-green').click(function() { 
  filterColor('green'); 
}); 
 
$('.f-all').click(function() { 
  $('div').slideDown(); 
  fActive = 'all'; 
});

body { 
  padding: 10%; 
  font-family: sans-serif; 
} 
 
button { 
  padding: 1em; 
  border: 0; 
  margin: 0.25em; 
  color: #fff; 
  cursor: pointer; 
} 
 
.f-red { 
  background: #ff4136; 
} 
 
.f-red:hover { 
  background: #e90d00; 
} 
 
.f-green { 
  background: #2ecc40; 
} 
 
.f-green:hover { 
  background: #208e2c; 
} 
 
.f-blue { 
  background: #0074d9; 
} 
 
.f-blue:hover { 
  background: #004b8c; 
} 
 
.f-all { 
  background: #333; 
} 
 
.f-all:hover { 
  background: #0d0d0d; 
} 
 
.red, 
.green, 
.blue { 
  color: #fff; 
  padding: 1em; 
  margin-bottom: 0.25em; 
} 
 
.red { 
  background: #ff4136; 
} 
 
.green { 
  background: #2ecc40; 
} 
 
.blue { 
  background: #0074d9; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<p> 
 
  <button class="f-red">Фильтр красных элементов</button> 
  <button class="f-blue">Фильтр синих элементов</button> 
  <button class="f-green">Фильтр зеленых элементов</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  <button class="f-all">Все элементы</button> 
</p> 
 
<div class="red">Первый</div> 
<div class="red">Второй</div> 
<div class="blue">Третий</div> 
<div class="green">Четвертый</div> 
<div class="red">Пятый</div> 
<div class="blue">Шестой</div> 
<div class="blue">Седьмой</div> 
<div class="green">Восьмой</div>