JavaScript
Article

Animated Filtering & Sorting with the MixItUp jQuery Plugin

By George Martsoukos

Filtering and sorting parts of your website is a great way to organize it. Portfolios, albums, and blogs are just a few examples of things you might want to categorize. To achieve this, many jQuery plugins can help. Examples are the MixItUp, Isotope, and Quicksand plugins.

In this article, I’ll go over the basic features of MixItUp and show you all the steps needed to take advantage of it in your projects. To better demonstrate how this plugin works, I’ve also created a demo, which I’ll refer to throughout the article.

What is MixItUp?

As mentioned above, MixItUp is a jQuery plugin that allows you to filter and sort elements using CSS-based animations. You can integrate MixItUp easily into your existing layouts. All that’s needed is to target the desired elements and the plugin will do the grunt work for you.

For non-commercial projects, you can use MixItUp for free. However, a license is required if you choose to use it in a commercial project. More information is available on their licenses page.

As described on their features page, browser support is decent (including IE10+ with full functionality, and a fallback to no animations but functional in IE8+).

With that brief introduction, let’s see the required steps in order to use it.

Getting Started with MixItUp

To get started with MixItUp, you have to make sure that both the jQuery and MixItUp scripts are included in your projects. You can download them by visiting their respective websites or by using a package manager, like Bower. There’s also the option to load the necessary scripts via CDNs.

For our demo, we’ll use the third option. These scripts will be placed before the closing body tag:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>0
<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>

Let’s continue with the structure of our content.

MixItUp Basics

First, we wrap the elements that we want to sort and filter in a container. The wrapped elements should each be given a common class name. In our case, the class name is mix-target. The container will use this class to identify which are the target elements. Furthermore, we assign a unique ID to the container (mix-wrapper). Later, we’ll use this ID to initialize an instance of MixItUp.

Here’s the HTML that demonstrates what I just described:

<ul class="courses" id="mix-wrapper">
    <li class="mix-target">
        <a href="#">Economics<span>(U)</span></a>
    </li>
   <li class="mix-target">
       <a href="#">Pharmacology<span>(G)</span></a>
   </li>
   <!-- other code here... -->  
</ul>

Before instantiating MixItUp, we have to hide our elements. This will prevent any undesirable effects during this process. Here’s the corresponding CSS:

.courses .mix-target {
    display: none;
}

At this point we’ve set up the basic structure of our elements. We’re now ready to see how the filtering and sorting work.

Filtering

We start by identifying the filter categories in our content. In this example, we’ll use some education-related categories: undergraduate, graduate, and phd. Then, we add these as classes to the target elements.

Here’s the code for the first two items:

<li class="mix-target undergraduate">
      <a href="#">Economics<span>(U)</span></a>
  </li>
  <li class="mix-target graduate">
      <a href="#">Pharmacology<span>(G)</span></a>
  </li>

Next, we define the click handlers that will show the filter items. We’ll use button elements to do this. We add the filter-btn class and the data-filter attribute to each of them. The value of the custom attribute should match the class names that have been applied to the target elements. The keywords all and none are also possible values.

Two of our filter buttons are shown below:

<button class="filter-btn" data-filter=".undergraduate">Undergraduate</button>
<button class="filter-btn" data-filter=".graduate">Graduate</button>

By default, when MixItUp first loads, it shows all the target elements. That means, the button with the custom attribute data-filter="all" is triggered. Moreover, the plugin applies a class of active to this button. This allows us to style the selected filtering/sorting option to indicate that it was chosen or “active”. Here’s how we’ll style it in our demo:

.programs button.active {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5) inset, 0px 0px 1px transparent;
    background: #3a9fbf;
    color: white;
}

Let’s now continue with sorting.

Sorting

The first thing we have to do is to identify the attributes we want to sort by. In our project, these are the order and year attributes. As a next step, we use their names to apply custom attributes (data-order and data-year) to the target elements. The values of these custom attributes depend on the sort order we want to achieve.

The HTML for two items will look like this:

<li class="mix-target undergraduate" data-order="5" data-year="4">
    <a href="#">Economics<span>(U)</span></a>
</li>
<li class="mix-target graduate" data-order="14" data-year="2">
    <a href="#">Pharmacology<span>(G)</span></a>
</li>

At this point, we define button elements as click handlers and we add the sort-btn class and the data-sort attribute to each of them. The value of this attribute should use the following convention:

<button data-sort="order:asc">

So we have the attribute for sorting, then as the value we have an order type, followed by a colon along with either the “asc” or “desc” indicator.

This attribute also accepts as values the default and random keywords. Another interesting thing is that we can sort using many attributes at the same time.

Two of the sort buttons that are used in our example are shown below:

<button class="sort-btn" data-sort="order:asc">Ascending</button>
<button class="sort-btn" data-sort="year:desc order:desc">Descending <span class="multi">(Multi)</span></button>

When MixItUp first loads, the button with the attribute data-sort="default:asc" is triggered. So, the elements are sorted based on their DOM appearance. Similar to the default filter button, this button receives the active class.

Now that we’ve covered the basic features of MixItUp, it’s time to see how we can configure it to suit our needs.

Configuration Options

MixItUp comes with default settings that can be customized by modifying the properties of the MixItUp configuration object.

As a first customization, when the plugin loads, we change the default active sort button. Next, we identify different animation effects for the target elements. Another change is to add custom classes to the target elements, filter, and sort buttons. Finally, as soon as each of the MixItUp operations finishes, we update the state object. This object can be helpful for debugging purposes.

Here’s the object that we finally instantiate (the original default values are indicated in comments):

$('#mix-wrapper').mixItUp({
    load: {
        sort: 'order:asc' /* default:asc */
    },
    animation: {
        effects: 'fade rotateZ(-180deg)', /* fade scale */
        duration: 700 /* 600 */
    },
    selectors: {
        target: '.mix-target' /* .mix */
        filter: '.filter-btn', /* .filter */
        sort: '.sort-btn' /* .sort */
    },
    callbacks: {
        onMixEnd: function(state) {
            console.log(state) /* null */
        }
    }
});

You can view this example code in action in the full demo, which you can try below:

See the Pen MixItUp jQuery Plugin demo by SitePoint (@SitePoint) on CodePen.

Conclusion

This article covers only the basics of using the MixItUp plugin. There’s much more we could discuss, including its API methods that allow for advanced interactivity, feedback, and real-time configuration. I hope that the demo gave you an idea of how you could use the plugin in an upcoming project.

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

Comments
fetchez_la_vache

Great Demo.
Not come accross this before so having a play. Is it possible to have more than one filter? For example in your demo, to have an "All / Active / Inactive" filter as well as the existing "All / Under / Grad / PHD" filter?
Top work smile

georgemarts

Happy to know that you liked the article! Yes, it's possible! To demonstrate it, I extended the demo of this article so as to include another filter. You can take a look at it here. For more customization, I also suggest you to read the documentation.

BHWD

This has helped me on several occasions recently. Thank you for putting this together. I am trying to have 2 separate width classes (1 = 20% width, 2 = 40%+single gutter width). Would you happen to know how to have variable widths?

georgemarts

Hi @BHWD,

I'm afraid I didn't understand what you want to do. Can you give me an example?

Ramon_Hitzeroth

Can this effect be done with dropdowns?

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.