GitHub
How to use
1. Include jQuery (ignore this if you have already included on the page).
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
2. Include jQuery EasyFilter plugin.
<script src="./js/jquery.easyFilter.min.js" type="text/javascript"></script>
3. Create the markup, you will need a container where you will put elements with data-easyfilter attribute that have the Click Listener Event and elements with data-easyitem attribute that will be filtered.
<div id="easy-filter-wrap">
<button type="button "data-easyfilter="*"> All </button>
<button type="button "data-easyfilter="item01,item02"> Item 01 and 02 </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>
<br /> <br />
<div data-easyitem="item01"> Item 01 </div>
<div data-easyitem="item02"> Item 02 </div>
<div data-easyitem="item03"> Item 03 </div>
</div>
4. Initialize the EasyFilter plugin.
<script>
$('#easy-filter-wrap').easyFilter();
</script>
5. It will look like this.
Options
$('#easy-filter-wrap').easyFilter({
firstFilter: '*',
animation: 'slide',
duration: 400
});
| Option | Type | Description |
|---|---|---|
|
firstFilter |
string |
Default: '*'.
|
|
animation |
string |
Default: 'slide'.
|
|
duration |
int | string |
Default: 400.
|