Simple Jquery Div Sort

index.htm

<button class="active btn" data-filter="box">Show All</button>
<button class="btn" data-filter="a">Show A</button>
<button class="btn" data-filter="b">Show B</button>
<button class="btn" data-filter="c">Show C</button>
<button class="btn" data-filter="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 a">C &amp A</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
</div>

script.js

var $boxs = $("#parent > .box");
var $btns = $(".btn").on("click", function() {
  
  var active = 
    $btns.removeClass("active")
      .filter(this)
      .addClass("active")
      .data("filter");
  
  $boxs
    .hide()
    .filter( "." + active )
    .fadeIn(450);

});

style.css

* {
  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;
}