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