jQuery Plugin For Reordering and Filtering Html Elements - filter.js

filter.js is a lightweight jQuery plugin that allows to dynamically filter and reorder sets of html elements with fade-in and fade-out aniamtions. Suitable for creating a filterable portfolio which allows the visitor to filter items based on selected tags.

See also:

• jQuery Plugin For Interactive and Filterable Portfolio
• jQuery Plugin To Order and Filter Items With Shuffling Animation - Quicksand
• jQuery Plugin For Filtering and Sorting Html Elements - MixItUp

Basic Usage:

1. Create the filter tags.

<div id="tags">
    <a href="#" data-filter="green">Green</a>
    <a href="#" data-filter="blue">Blue</a>
    <a href="#" data-filter="red">Red</a>
    <a href="#" data-filter="yellow">Yellow</a>
</nav>

2. Create the filterable html elements. 

<div id="filter">
    <div style="background: green" data-filter-tags="green"></div>
    <div style="background: blue" data-filter-tags="blue"></div>
    <div style="background: red" data-filter-tags="red"></div>
    <div style="background: yellow" data-filter-tags="yellow"></div>
    <div style="background: orange" data-filter-tags="yellow,red"></div>
    <div style="background: purple" data-filter-tags="blue,red"></div>
    <div style="background: cyan" data-filter-tags="blue,green"></div>
    <div style="background: black" data-filter-tags="green,blue,red,yellow"></div>
    <div style="background: magenta" data-filter-tags="red,blue"></div>
</div>

3. Include the jQuery javascript library and jQuery filter.js at the end of your document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="filter.js"></script>

4. Initialize the plugin. That's it.

<script type='text/javascript'>
$(function(){
$('#filter').filter();
}); 
</script>

5. Settings.

nav: '[data-filter]',
showAny: false

Change log:

2014-04-21

• Add setting to show any of the options selected

---

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