JQuery plugin to do simple single category filtering on a set of elements
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example.gif
example.html
jquery.yosimplefilter.js
package.json
readme.md

readme.md

Yo Simple Filter

By Chris Johnson | https://github.com/ChrisLTD/yo_simple_filter

Yo Simple Filter does simple single category filtering on a set of elements.

Animated Example

Just activate the plugin on a properly formatted wrapper element, make sure you have a proper set of filters and you're good to go. Alternatively, you can pass alternate selectors as settings to match your custom HTML structure.

Usage Examples

Simple example

<button class="filter" data-filter="">All</button>
<button class="filter" data-filter=".f-fruit">Fruit</button>
<button class="filter" data-filter=".f-vegetable">Vegetables</button>

<div id="items">
	<div class="filter_item f-vegetable">Celery</div>
	<div class="filter_item f-fruit">Apple</div>
	<div class="filter_item f-fruit f-vegetable">Tomato</div>
</div>

<!-- Include JQuery Core above this line -->
<script src="jquery.yosimplefilter.js"></script>
<script>
	$("#items").YoSimpleFilter();
</script>

Options

'childObject'  : '.filter_item',	// Targets to be filtered
'filterObject' : '.filter',			// Elements that do the filtering
'animate' : true,					// Should the filtering be animated
'animationSpeed' : 200,				// Animation speed in milliseconds
'initCallback' : function() {},		// Called if plugin initialized on an object
'filterCallback' : function() {}	// Called after a filter is ru