MixItUp – Animated filtering and sorting with jQuery

Container and Target Elements

MixItUp filters and sorts content inside a container. Your container should have a unique ID that MixItUp will use to reference it. If your container does not have an ID, MixItUp will randomly generate one. By default MixItUp will look for elements to filter and sort within your container with the class ’mix’ but this can be changed via the configuration object. We will call these elements target elements.

How you style your container and target elements is up to you. MixItUp is designed to be compatible with modern percentage-based responsive layouts and for that reason we recommend flow-based layouts such as inline-block orflex box rather than using floats. Need to brush up on your grids? Check out ourresponsive grids tutorial to learn more.

<div id="Container">
	<div class="mix"></div>
	<div class="mix"></div>
	<div class="mix"></div>
	<div class="mix"></div>
</div>

» A typical MixItUp container containing target elements with the class “mix”.

Filtering and Sorting

For MixItUp to be able to filter and/or sort the target elements correctly, each one should be given specific data. For filtering, each category that the target element belongs to should be added as an additional class name.

For sorting we’ll need to add a new “data” attribute of our choice to the target element containing information about its order in comparison to its siblings.

<div id="Container">
	<div class="mix category-1" data-myorder="2"></div>
	<div class="mix category-2" data-myorder="4"></div>
	<div class="mix category-1" data-myorder="1"></div>
	...
	<div class="mix category-2" data-myorder="8"></div>
</div>

» Classes for filtering and data attributes for sorting have been added to the target elements.

Filtering Controls

Filtering happens when filter buttons are clicked. By default MixItUp will apply filtering click handlers to any clickable element with the class ’filter’ but this can be changed via the configuration object.

Each filter button requires the attribute data-filter containing a CSS selector of the elements you wish to show which is typically the class name of that category (eg. data‑filter=".category-1").

The data‑filter attribute also accepts the values all and none.

When a filter category is active its corresponding filter buttons gets the class ’active’ which can be used for styling active buttons.

<div class="filter" data-filter="all">Show All</div>
<div class="filter" data-filter=".category-1">Category 1</div>
<div class="filter" data-filter=".category-2">Category 2</div>

» A list of filter buttons. Each one requires a “data-filter” attribute with a CSS selector targeting the elements you wish to show.

Sorting Controls

Sorting happens when sort buttons are clicked. By default MixItUp will apply filtering click handlers to any clickable element with the class ’sort’ but this can be changed via the configuration object.

Each sort button requires the attribute data‑sort containing a colon-seperated string; the first part being the name of the data attribute you wish to sort by, and the second part being the order (eg. data‑sort="myorder:asc").

The data‑sort attribute also accepts the values default and random.

Sorting by default will sort elements according to the order that they appear in the DOM on page load. The second part of the string is optional, as ascending order is assumed by default.

When a sort order  is active, its corresponding sort buttons gets the class ’active’ which can be used for styling active buttons.

<div class="sort" data-sort="default">Default</div>
<div class="sort" data-sort="myorder:asc">Ascending</div>
<div class="sort" data-sort="myorder:desc">Descending</div>
<div class="sort" data-sort="random">Random</div>

» A list of sort buttons. Each one requires a “data-sort” attribute containing the name of the attribute you wish to sort by, and the order.

Advanced Filtering

Consistent with jQuery’s .filter() method, multiple CSS selectors can be combined to mimic logical operations. For example:

<div class="filter" data-filter=".category-1.category-2"> ... </div>

// Show target elements that have both classes category-1 AND category-2

<div class="filter" data-filter=".category-1, .category-2"> ...</div>

// Show target elements that have either classes category-1 OR category-2

» CSS Selectors can be combined for advanced filtering.

Advanced Sorting

Any number of custom sorting attributes may be combined in order of priority as a space-separated string:

<div class="sort" data-sort="age:desc name:desc"> ... </div>

» Target elements are sorted firstly by their data-age attribute and then by data-name.

#Container .mix{
	display: none;
}

» Target elements must be hidden by default in your project’s stylesheet.

		<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
		<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
		<script src="main.js"></script>
	</body>
</html>

» JavaScript assets are typically loaded before the closing body tag of your document.