Cacher is the code snippet organizer for pro developers

https://codepen.io/terf/post/jquery-filter-divs


https://codepen.io/NickyCDK/pen/lhaiz

CSS:
<style>
* {
  box-sizing: border-box;
}
body {
  padding: 10px;
  background: #ecf0f1;
  font-family: helvetica, sans-serif;
  font-weight: 200;
}
.btn {
  border: none;
  background: linear-gradient(to bottom, #3498db, #2980b9);
  border-radius: 3px;
  font-family: Arial;
  color: #ffffff;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  margin: 5px;
}

.active {
  background: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}
.box {
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  padding: 10px;
  height: 100px;
  width: calc(25% - 10px);
  float: left;
  margin: 5px;
  text-align: center;
  border-radius: 3px;
  color: #fff;
}
.spacer {
  clear: both;
  height: 20px;
}  
</style>



===== HTML ====

    <h1>FILTERS</h1>

<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>

<div class="spacer"></div>

<div id="parent">
  <div class="box a b">A &amp; B</div>
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box c d">C &amp; D</div>
  <div class="box a">AA</div>
  <div class="box b">BB</div>
  <div class="box c">CC</div>
  <div class="box d">DD</div>
  <div class="box a">AAA</div>
  <div class="box b">BBB</div>
  <div class="box c">CCC</div>
  <div class="box d">DDD</div>
  <div class="box d">DDDD</div>
  <div class="box a">AAAA</div>
</div>


<script>
  $(document).ready(function() {

var $btns = $('.btn').click(function() {
	console.log('Clicked ID: ' + this.id ) ; 
  if (this.id == 'all') {
    $('#parent > div').fadeIn(450);
  } else {
    var $el = $('.' + this.id).fadeIn(450);
    $('#parent > div').not($el).hide();
  }
  $btns.removeClass('active');
  $(this).addClass('active');
})

}) ;

</script>