Sort and Filter content
on Webflow with MixitUp3

Using select element for the controls

This example shows how to use select form element for control Filtering and Sorting of your Dynamic collection. (This is probably the most simple example 🙂)

Required structure of the Dynamic Item and process of applying classes were described in the Filtering CMS Content tutorial.

STEP 1.

Form Block
.controls-form 
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
.mix 
.
filter-2
Designers Who Changed the Web
.mix 
.
filter-3
Web Design Blogs You Can't Miss
.mix 
.
filter-1
The History Of Web Design
.mix 
.
filter-2
Best Examples of Beautiful Blog Design
.mix 
.
filter-4
Quick Tips About Blogging
.mix 
.
filter-1
Tools For Web Designers
.mix 
.
filter-4
Usability And Accessibility
.mix 
.
filter-5
7 Things About Web Design Your Boss Wants To Know
.mix 
.
filter-1
Principles Of Effective Web Design

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:

STEP 2.

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.

STEP 5.

Open this example in a new tab

This example above is fully functional, feel free to try Filtering or Sorting.

Put all custom code together

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

Full code for his example will look like this: