Filter In JS With easyFilter

Filter In JS with easyfilter is a lightweight jQuery filter plugin that provides an easy way to filter any HTML content with fade or slide animations.

Filter In JS
Filter In JS With easyFilter

How to use it:

1. Include the jQuery EasyFilter plugin's script after you load the latest jQuery library.

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

2. Group your element to be filterable using the data-easyfilter attribute and then insert them together with the filter controls into a filter wrapper element 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>

3. Not only buttons, you can use any elements (like checkboxes, radio buttons) as filter controls:

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

4. Enable the plugin by calling the function easyFilter on the parent container. That's it.


5. Customize the animation when filtering elements.


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

  // duration of the animation
  duration: 400

6. Determine which filter control should be activated on page load. Default: '*' (all).


  firstFilter: 'item02'

Live Demo

See the Pen Filter In JS With easyFilter by Plugin JS (@pluginjs) on CodePen.

File Info

File Name :
Size :
Site Download :
Official Website:
Go to website
Previous Post Next Post