Isotope v2 beta (back to V1)

Changes from Isotope v1. Report any issues with Isotope v2. Thanks for being brave!

Filtering

• Selectors
• Functions
• Creating interactive buttons

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.

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. This allows you to filter with a bit more logic.

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

Creating interactive buttons

Let’s use a group of buttons for the UI.

<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 and alkaline-earth</button>
  <button data-filter=":not(.transition)">not transition</button>
  <button data-filter=".metal:not(.transition)">metal but not transition</button>
</div>

Each button has its filter set in the data-filter attribute. 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( event ) {
  var filtr = $(this).attr('data-filter');
  $container.isotope({ filter: filtr });
});

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( event ) {
  var filtr = $(this).attr('data-filter');
  // see if filter function is matched
  filtr = filterFns[ filtr ] || filtr;
  $container.isotope({ filter: filtr });
});

Other UI

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

• Example with select
• Example with radio buttons