A Pen by Marcus Burnette.

index.html

<h2>jQuery Filtering Demo</h2>
<p>Just trying to figure out how to best utilize jquery's .filter() function for future projects.</p>
<p>
<button class="f-red">Filter Red Items</button>
<button class="f-blue">Filter Blue Items</button>
<button class="f-green">Filter Green Items</button>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button class="f-all">All Items</button>
</p>

<div class="red">First</div>
<div class="red">Second</div>
<div class="blue">Third</div>
<div class="green">Fourth</div>
<div class="red">Fifth</div>
<div class="blue">Sixth</div>
<div class="blue">Seventh</div>
<div class="green">Eighth</div>

<p><small>Colors from <a href="http://clrs.cc/">http://clrs.cc/</a></small></p>

jQuery-Filtering-Demo.markdown

jQuery Filtering Demo

Just trying to figure out how to best utilize jquery's .filter() function for future projects.

A Pen by Marcus Burnette on CodePen.

License.

script.js

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';
});

style.scss

$red: #ff4136;
$green: #2ecc40;
$blue: #0074d9;

body {
  padding: 10%;
  font-family: sans-serif;
}

button {
  padding: 1em;
  border: 0;
  margin: 0.25em;
  color: #fff;
  cursor: pointer;
}

.f-red {
  background: $red;
  &:hover { background: darken($red, 15%); }
}
.f-green {
  background: $green;
  &:hover { background: darken($green, 15%); }
}
.f-blue {
  background: $blue;
  &:hover { background: darken($blue, 15%); }
}
.f-all {
  background: #333;
  &:hover { background: darken(#333, 15%); }
}

.red, .green, .blue {
  color: #fff;
  padding: 1em;
  margin-bottom: 0.25em;
}

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