Filterable CPT cards

Based on this fork - http://jsfiddle.net/desandro/GwBa8/

by James Connolly

HTML

<script src="http://isotope.metafizzy.co.s3-website-us-east-1.amazonaws.com/v1/jquery.isotope.min.js"></script>
<div id="filters">
  <h3>Filter Categories:</h3>
  <div class="filter-choice">
    <input type="checkbox" id="red" value=".red" >
    <label for="red">red</label>
  </div>
  <div class="filter-choice">
    <input type="checkbox" id="blue" value=".blue" >
    <label for="blue">blue</label>
  </div>
  <div class="filter-choice">
    <input type="checkbox" id="green" value=".green" >
    <label for="green">green</label>
  </div>
  <div class="filter-choice">
    <input type="checkbox" id="yellow" value=".yellow" >
    <label for="yellow">yellow</label>
  </div>
</div>

<div id="init-isotope">
  <div class="container">
    <article class="item red">Red</article>
    <article class="item blue">Blue</article>
    <article class="item green">Green</article>
    <article class="item yellow">Yellow</article>
    <article class="item red">Red</article>
    <article class="item blue">Blue</article>
    <article class="item green">Green</article>
    <article class="item yellow">Yellow</article>
    <article class="item red">Red</article>
    <article class="item blue">Blue</article>
    <article class="item green">Green</article>
    <article class="item yellow">Yellow</article>
    <article class="item red">Red</article>
    <article class="item blue">Blue</article>
    <article class="item green">Green</article>
    <article class="item yellow">Yellow</article>
</div>

SCSS

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

// filter styles
#filters {
  display: flex;
  align-items: center;

  h3 {
    margin-right: 15px;
  }

  input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    left: -9999px;
    
    + label {
      display: inline-block;
      margin: 5px;
      padding: 5px 10px;
      border: 2px solid #000;
      opacity: 0.5;
      
      transition-duration: 0.3s;
      transition-property: opacity, background, color;
      
      &:hover {
        cursor: pointer;
      }
    }

    + label:hover,
    &:checked + label {
      opacity: 1;
      background: #000;
      color: #fff;
    }
  }
}


// container styles (demo only)
.container {
  display:block;
}

.filter-option {
  display:inline-block;
  box-sizing: border-box;
  text-align: center;
  padding: 75px;
  width: 33.333%;
}

.red { background: red; }
.blue { background: blue; }
.green { background: green; }
.yellow { background: yellow; }

// filtering styles & animations
.isotope-item {
  z-index: 2;
}

.isotope,
.isotope .isotope-item {
  transition-duration: 0.8s;
}

.isotope .isotope-item {
  transition-property: transform, opacity;
}

JavaScript

$(function(){
	
  // adds targeted classes so featured resources are unaffected by filtering
  $("#init-isotope .container").addClass("filter-wrap");
  $("#init-isotope article").addClass("filter-option");
  
  var $container = $('.filter-wrap'),
      $checkboxes = $('#filters input');
  
  $container.isotope({
    itemSelector: '.filter-option',
    // filter red items first
    //filter: '.red'
  });
  
  $checkboxes.change(function(){
    var filters = [];
    // get checked checkboxes values
    $checkboxes.filter(':checked').each(function(){
      filters.push( this.value );
    });
    // ['.red', '.blue'] -> '.red, .blue'
    filters = filters.join(', ');
    $container.isotope({ filter: filters });
  });
    
});