How to make use of it:

1. Include the jQuery EasyFilter plugin’s script after you load the newest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.easyFilter.js"></script>

2. Group your component to be filterable utilizing the data-easyfilter attribute after which insert them along with the filter controls right into a filter wrapper component as follows:

<div id="easy-filter-wrap">
  <!-- Filter Controls -->
  <button type="button "data-easyfilter="*"> All </button>
  <button type="button "data-easyfilter="item01"> Item 01 </button>
  <button type="button "data-easyfilter="item02"> Item 02 </button>
  <button type="button "data-easyfilter="item03"> Item 03 </button>
  <!-- Filterable Elements Here -->
  <div data-easyitem="item01"> Item 01 </div>
  <div data-easyitem="item02"> Item 02 </div>
  <div data-easyitem="item03"> Item 03 </div>
</div>

3. Not only buttons, but you should also utilize any elements (like checkboxes, radio buttons) as filter controls:

<label data-easyfilter="*">
  <input type="radio" name="options" id="option1" checked> All
</label>
<label data-easyfilter="item01">
  <input type="radio" name="options" id="option2"> Item 01
</label>
<label data-easyfilter="item02">
  <input type="radio" name="options" id="option3"> Item 02
</label>
<label data-easyfilter="item03">
  <input type="radio" name="options" id="option3"> Item 03
</label>

4. Enable the plugin by calling the function easyFilter on the parent container.

$(function(){
  $('#easy-filter-wrap').easyFilter();
});

5. Customize the animation when filtering elements.

$('#easy-filter-wrap').easyFilter({

  // or 'fade'
  animation: 'slide',

  // duration of the animation
  duration: 400
  
});

6. Determine which filter control must be activated on the web page load.

$('#easy-filter-wrap').easyFilter({

  firstFilter: 'item02'
  
});

Filter Anything With jQuery, jquery Easyfilter Plugin/Github

See Demo And Download