First, define your filter groups in an array. An array is a list!
Then run the function below the array!
Paste this block of code before </body> tag of the page you're working with.
The variable we created to store our Library instance. The name of the variable can be set to whatever you want.
A variable we established to store our array. This is variable holds all of our filter groups establishes how the filter groups work. You can name this variable anything you want.
The parent div wrapper holding the ui elements of a filter group.
Can be exclusive or multi select specific to that filter group.
Allows the user to select 1 option inside the group at a time. The filter is exclusive to 1 option so for example clicking "red" would select all items with "red". If you then clicked "blue", "red" would be unselected.
Allows the user to select multiple options inside the group at a time so that clicking "red" would select items with "red". If you then clicked "blue", "red" would remain selected. Both options will be selected at the same time. The filtered grid would show results that match both "red" and "blue".
Optional. The class given to the keyword text you want to target in search results.
This is useful when keywords from different group conflict. For example, "Kentucky USA" and "Kentucky Fried Chicken"
Optional. Default is ~false~. Set to ~true~ to use this filter group to filter a range of numbers.
For example, if you wanted to filter items between 20 and 66.
Where we use our variable that holds array we created. In the example, this would be ~myFilters~.
Optional. The class that will be added to buttons when they are in an active state.
Optional. The class applied to a button that resets all active filters when clicked.
Option to add animations and transitions for items leaving and entering the filtered grid.
~true~ turns on animation on, ~false~ turns animation off (default: ~true~).
Time the animation happens in seconds. ~0.2~ would be 0.2 seconds, or 200 milliseconds (default: ~0.2~).
Easing of the effect. Available options are ~ease~, ~ease-in~, ~ease-out~, and ~ease-in-out~ (default: ~ease~).
Add ~fade~, ~translate~, ~rotate~, and ~scale~ effects (default: ~fade~).
The data-attribute placed on the ui element to tell the Library what to filter by when that ui element is clicked.
Here we have created 3 filter groups: ~.filter-bar-category,~ ~.filter-bar-color~, and ~.filter-bar-service~. These are the class names we put as the value of the filterWrapper option when we create our array. The UI elements that control the filtering of that group are children.
Filter buttons can be deep nested inside the parent wrapper. They don't have to be direct children. Check out the Checkbox nested-nested-nested inside ~.filter-bar-service~.
We got you for full flexibility!
We need to tell the Library what each button should filter by when it's clicked. We apply a data attribute with a name of 'filter-by' to each button that will update the filter. The "value" of that data attribute is the keyword that button will filter by.
A value of "*" will filter ALL items in that group (can be used to remove/reset the filter).