Filtering

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

See Demo: Filtering

Markup

Each item element has several identifying classes. In this case, transition, metal, lanthanoid, alkali, etc.

jQuery script

To show only .metal items, the jQuery script would be:

The filter option uses a jQuery selector to show item elements that match a selector, and hide all others that do not. For example:

• .alkali, .alkaline-earth will show .alkali AND .alkaline-earth item elements.
• .metal.transition will show item elements that have BOTH .metal and .transition classes.
• .metal:not(.transition) will show .metal item elements that are NOT .transition.

Creating interactive buttons

Let’s use a basic list for our buttons

Here we set the filter for each link with a data-filter attribute. In our jQuery script, whenever a link is clicked, we’ll use this attribute as the filter selector.

Recommended CSS

If you choose to use the filtering functionality, add the following CSS to your stylesheet:

These styles ensure that hidden items will not interfere with interactions.