Creating A Dynamic List Filter using jQuery

A minimal jQuery script that utilizes jQuery's filter() function to create a live filter on a list of grouped items, with smooth slide up/down filter animations.

How to use it:

1. Create a list of filterable items that are grouped by different CSS classes.

<div class="group-1">First</div>
<div class="group-2">Second</div>
<div class="group-2">Third</div>
<div class="group-3">Fourth</div>
<div class="group-1">Fifth</div>
<div class="group-2">Sixth</div>
<div class="group-2">Seventh</div>
<div class="group-3">Eighth</div>

2. Create a set of controls to filter the list by groups.

<button class="f-group-1">Filter Group 1 Items</button>
<button class="f-group-2">Filter Group 2 Items</button>
<button class="f-group-3">Filter Group 3 Items</button>

<button class="f-all">All Items</button>

3. Include the necessary jQuery library at the end of the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

4. The jQuery script to active the live list filter.

var fActive = '';

function filterGroup(group){
  if(fActive != group){
    $('div').filter('.'+group).slideDown();
    $('div').filter(':not(.'+group+')').slideUp();
    fActive = group;
  }
}

$('.f-group-1').click(function(){ filterGroup('group-1'); });
$('.f-group-2').click(function(){ filterGroup('group-2'); });
$('.f-group-3').click(function(){ filterGroup('group-3'); });

$('.f-all').click(function(){
  $('div').slideDown();
  fActive = 'all';
});

---

This awesome jQuery plugin is developed by mburnette. For more Advanced Usages, please check the demo page or visit the official website.