Isotope

Filtering

Isotope can hide and show item elements with the filter option. Items that match that filter will be shown. Items that do not match will be hidden.

Selectors

The simplest way to filter items is with selectors, like classes. For example, each item element can have several identifying classes: transition, metal, lanthanoid, alkali, etc.

Set a selector with the filter option. Items that match the selector will be shown. Items that do not match will be hidden.

jQuery selectors

Isotope uses jQuery to filter items (if jQuery is present). You can filter items with jQuery selectors.

Functions

You can filter with functions. The example at the top of this page uses a function to filter items when the item’s number is greater than 50.

If you use jQuery, you can filter with functions in jQuery.

You can still filter with functions if you don’t use jQuery.

UI

The example at the top uses buttons for UI. Each button has its filter set in the data-filter attribute.

In the JS, we can use that filter when a button is clicked.

Filter functions

To filter with a function, use a keyword and map it to an object.

Other UI

Your UI does not have to be buttons. You can use s, radio inputs, and other options. •Select example •Radio input example •Filtering with a quick-search •Inclusive combination filters with checkboxes •Inclusive combination filters with toggle buttons Combination filters Filters can be combined. In addition to filtering for just .red or .tall, you can pass in a filter selector of both: .red.tall. Combination filters UI In this example, buttons are collected in a button-group. Each button-group has a data-filter-group.   In the JavaScript, these filters are stored in an object, filters. When a button is clicked, it changes the filter for that group. The object’s values are then combined into one filter '.red.small'. URL hash You can hook filtering into the hashchange event so that Isotope filters can be applied as links. Sorting Isotope can rearrange the order of item elements based on their data.   HTML All the data used for sorting can be set in the HTML. For the example at the top of the page, each item element has several data points that can be used for sorting.   getSortData Isotope reads data from HTML with the getSortData option. getSortData is set with an object. The object’s keys are keywords used to sort by. Object values are either a shortcut string or function to retrieve the data.   getSortData strings When a getSortData value is set to a string, the string will be used as a query selector to get the text of a child element for each item element by default.   A string wrapped in brackets, like '[attribute]', will be used to get the value of an attribute.   Data values can be parsed into numbers by adding parser keywords to the shortcut string.   getSortData functions getSortData values can be set to a function. This function is used on each item element to get data. The function provides one parameter itemElem, which is the item element. The function needs to return the data point.   sortBy For every property set in getSortData, Isotope can use it for sorting with the sortBy option. The value of sortBy needs to match a key in getSortData. With the properties above, sortBy can be set to 'name', 'symbol', 'number', 'weight', and 'category'.   Two additional sortBy options are built in.   Multiple sortBy To sort by multiple properties, you can set sortBy to an array. For example, sortBy: [ 'color', 'number' ] will sort items by color, then by number.   sortAscending By default, Isotope sorts ascendingly: A, B, C and 1, 2, 3. To sort descendingly Z, Y, X, and 9, 8, 7, set sortAscending: false.   sortAscending can also be set with an object, so that you can set ascending order for each sortBy value.   updateSortData To update sort data after a change has been made to item elements, use the updateSortData method.   UI Let’s use a group of buttons for the UI.   Each button has its sortBy value set in the data-sort-by attribute. In the JS, we can use that value when a button is clicked.