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. Used for making your filter buttons more specific. Limit your filter group to a single field in your CMS collection.
This is useful when keywords from other CMS Collection fields conflict. For example, "Kentucky USA" and "Kentucky Fried Chicken"
Add filterByClass to your filter array:
~.states-text~ is the class of the CMS field you want to limit your filter to.
Tutorial for filterByClass: https://cmsdocs-howto.webflow.io/filter/example9
Optional. Used for filtering number values inside your Collection. Set to ~true~ to use this filter group to filter a range of numbers. This allows you to add number value ranges to your filter buttons.
Add filterRange to your filter array:
Next, use a number range as your value inside your ~filter-by~ data attribute applied to your filter button. Works with prices!
Tutorial for filterByRange: https://cmsdocs-howto.webflow.io/filter/example8
Our variable that holds the array we created. This array is a list that holds all of our filter groups.
In the example, our filterArray value would be would be ~myFilters~.
The class that will be added to buttons when they are in an active state. This allows you to visibly show the user that a filter is active.
IMPORTANT: You must create a style for this active class inside Webflow. If you set your active state to the class 'button-active' you must create a style in Webflow Designer for button-active.
Optional. Creates a button that resets all filters.
The class applied to a button that resets all active filters.
Tutorial for filterReset: https://cmsdocs-howto.webflow.io/filter/example7b
Shows a div when filter has 0 results.
~".empty-container"~ is a class applied to a div. When there are no items to show when filtering, this div will be set to ~display: block~.
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~).
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!
The data-attribute placed on your filter button.
This tells the Library what to filter by when that ui element is clicked.