Sort and Filter content
on Webflow with MixitUp3

Building Controls using a select elements

After container with Dynamic Items was created and all necessary classes (for filtering and sorting) were applied start building Controls inside the Form.

‍

• Add a Form to the page (has classname .controls-form in this example).
  ‍

• Add one select form element for filtering and one for sorting. Give it classes .filter_select and .sort_select accordingly to their functions (I also used columns labels for creating better user experience).

• In the .filter_select element settings add options for each filtering category with the value that is equal to the class created from that filtering category. Values should look like a classname in CSS format (with "dot"). Also, add the option "All" and set the value equal to all (without "dot")

• In the .sort_select element settings add options for random, ascending and descending collection sort. Similar to the previous tutorials, set their values equals to random, order:asc and order:desc accordingly:

custom code and MIXITUP API FOR Select elements

Similar to all previous examples, first we will define our container, and controls (part #1).

Then bind a 'change' event handler to our select elements, and interact with the mixer via its .filter() (part #2) and .sort() (part #3) API methods.

‍

Put all custom code together

Now we will include link to the MixitUp library and all our code snippets <script> </script>tags before the closing  tag into the page custom code area.

Full code for his example will look like this: