jQuery EasyFilter
The easiest way to filter anything!
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"> 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>
Options
$('#easy-filter-wrap').easyFilter({
firstFilter: '*',
animation: 'slide',
duration: 400
});
| Option | Type | Description |
|---|---|---|
firstFilter |
string | Default: '*'. Controls the first elements to show. |
animation |
string | Default: 'slide'. Select the animation. Values: 'slide' | 'fade' |
duration |
int | string | Default: 400. Controls the animation duration. Values: 'slow' | 'normal' | 'fast' | Any integer |
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
2 Apr 17, 2022
5 Jun 23, 2022
10 Dec 28, 2022
1 May 26, 2021
6 Aug 4, 2022
113 Dec 19, 2022
9 Dec 6, 2022