Marking instead of hiding items with Isotope

Question

Is it possible to somehow avoid hiding items while filtering content with (jQuery) Isotope?

The solution I'm after is to keep all elements in their positions in the Isotope container while somehow marking several after clicking on a button - the important thing is to show all the elements in the container all the time.

I'm aware that Isotope offers sorting, but I'm not sure if that's possible with sorting either.

http://isotope.metafizzy.co/sorting.html

Answer 1

I would probably just use plain old javascript/jQuery to select and add a class or change the required items.

So, the answer is, you don't need to use Isotope for this. Isotope can make an awesome layout, and you can keep it around, but you can just augment it with some plain old javascript/jQuery.

Isotope's filtering isn't actually magic. While you can provide a selector:

$container.isotope({ filter: '.show-these' });

You can just as easily use any sort of javascript/jQuery-Fu to create your own collection:

$items = $('.show-these');
$container.isotope({ filter: $items });

That is a nice trick if you want to do some advanced filtering in the future.

To mark some items, you can just forget the isotope filtering part and do whatever you want to any of the items. For marking, adding a class is probably a great idea (assuming your using jQuery):

// HTML
<div class="buttons">
  <a href='#' data-highlight=".popular">Most Popular</a>
...

// Isotopoe Items
<ul>
  <li class="popular">Item #1</li>
...

// JS
$('.buttons').on('click', 'a', function () {
  var $this = $(this),
    category = $this.data('highlight');

  $(category).addClass('highlighted');
});

All you would need to do is add some css for whatever class you want to add (highligh in the code above).

Also, the code above is one way only, you will probably want some logic to select and unselect, or you may want them to act like radio buttons.

This should point you in the right direction, let me know if you need some more assistance.