Filtering

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

$container.isotope({...})

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.

<div id="container">
  <div class="item transition metal">...</div>
  <div class="item post-transition metal">...</div>
  <div class="item alkali metal">...</div>
  <div class="item transition metal">...</div>
  <div class="item lanthanoid metal inner-transition">...</div> 
  <div class="item halogen nonmetal">...</div> 
  <div class="item alkaline-earth metal">...</div>
  ...
</div>

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

$container.isotope({ filter: '.metal' });

• '.alkali, .alkaline-earth' will show .alkali and .alkaline-earth item elements.
• '.metal.transition' will show item elements that have both .metal and .transition classes.
• '*' will show all items.

jQuery selectors

If jQuery is present, Isotope uses jQuery to filter items. You can filter items with jQuery selectors. For example:

• '.metal:not(.transition)' will show .metal item elements that are NOT .transition.

Functions

You can filter items with functions. The example above uses a function to filter items when the item’s number is greater than 50.

<div id="container">
  <div class="item ..."><p class="number">80</p></div>
  <div class="item ..."><p class="number">42</p></div>
  <div class="item ..."><p class="number">20</p></div>
  <div class="item ..."><p class="number">75</p></div>
  ...
</div>

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

$container.isotope({
  // filter element with numbers greater than 50
  filter: function() {
    // `this` is the item element. Get text of element's .number
    var number = $(this).find('.number').text();
    // return true to show, false to hide
    return parseInt( number, 10 ) > 50;
  }
})

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

iso.arrange({
  // item element provided as argument
  filter: function( itemElem ) {
    var number = itemElem.querySelector('.number').innerText;
    return parseInt( number, 10 ) > 50;
  }
});

UI

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

<div id="filters" class="button-group">
  <button data-filter="*">show all</button>
  <button data-filter=".metal">metal</button>
  <button data-filter=".transition">transition</button>
  <button data-filter=".alkali, .alkaline-earth">alkali & alkaline-earth</button>
  <button data-filter=":not(.transition)">not transition</button>
  <button data-filter=".metal:not(.transition)">metal but not transition</button>
</div>

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

// init Isotope
var $container = $('#container').isotope({
  // options
});
// filter items on button click
$('#filters').on( 'click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $container.isotope({ filter: filterValue });
});

Filter functions

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

  <!-- in button group -->
  <button data-filter="numberGreaterThan50">number > 50</button>
  <button data-filter="ium">name ends with -ium</button>

// hash of functions that match data-filter values
var filterFns = {
  // show if number is greater than 50
  numberGreaterThan50: function() {
    var number = $(this).find('.number').text();
    return parseInt( number, 10 ) > 50;
  },
  // show if name ends with -ium
  ium: function() {
    var name = $(this).find('.name').text();
    return name.match( /ium$/ );
  }
};
// filter items on button click
$('#filters').on( 'click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  // use filter function if value matches
  filterValue = filterFns[ filterValue ] || filterValue;
  $container.isotope({ filter: filterValue });
});

Other UI

Your UI does not have to be buttons. You can use <select>s, radio inputs, and other options.

• Select example
• Radio input example
• Filtering with a quick-search

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.

$container.isotope({...})

Combination filters UI

In this example, buttons are collected in a button-group. Each button-group has a data-filter-group.

<div class="button-group" data-filter-group="color">
  <button data-filter="">any</button>
  <button data-filter=".red">red</button>
  <button data-filter=".blue">blue</button>
  <button data-filter=".yellow">yellow</button>
</div>

<div class="button-group" data-filter-group="size">
  <button data-filter="">any</button>
  <button data-filter=".small">small</button>
  <button data-filter=".wide">wide</button>
  ...
</div>

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'.

// store filter for each group
var filters = {};

$demo.on( 'click', '.button', function() {
  var $this = $(this);
  // get group key
  var $buttonGroup = $this.parents('.button-group');
  var filterGroup = $buttonGroup.attr('data-filter-group');
  // set filter for group
  filters[ filterGroup ] = $this.attr('data-filter');
  // combine filters
  var filterValue = '';
  for ( var prop in filters ) {
    filterValue += filters[ prop ];
  }
  // set filter for Isotope
  $container.isotope({ filter: filterValue });
});