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({...})

Mercury

Hg

80

200.59

Tellurium

Te

52

127.6

Bismuth

Bi

83

208.980

Lead

Pb

82

207.2

Gold

Au

79

196.967

Potassium

K

19

39.0983

Sodium

Na

11

22.99

Cadmium

Cd

48

112.411

Calcium

Ca

20

40.078

Rhenium

Re

75

186.207

Thallium

Tl

81

204.383

Antimony

Sb

51

121.76

Cobalt

Co

27

58.933

Ytterbium

Yb

70

173.054

Argon

Ar

18

39.948

Nitrogen

N

7

14.007

Uranium

U

92

238.029

Plutonium

Pu

94

(244)

Edit this example or example with vanilla JS on CodePen

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' });

jQuery selectors

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

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.

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.

Color

Size

Shape

$container.isotope({...})

Edit this example on CodePen

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 });
});