jQuery Isotope: Hiding items initially

Question

So I have items that can have multiple classes for filtering. Something like this:

<div class="items>
    <div class="item category-1 category-2">An item that displays initially.</div>
    <div class="item category-1 category-2 initially-hidden">An item that is initially hidden.</div>
    <div class="item category-1 category-2">An item that displays initially.</div>
    <div class="item category-1 category-2 initially-hidden">An item that is initially hidden.</div>
    <div class="item category-1 category-2">An item that displays initially.</div>
</div>

With isotope, how can I hide items with a certain class on page load? Say I want to hide any item with a class of initially-hidden on load, but still be able to have that item show up when I click a filter for any other class that item has? For the example code above, say I clicked a category-2 filter, then then all items that have category-2 (even if they have initially-hidden) would appear?

Basically on a project I'm working on, a client wants to be able to initially hide items on page load, but then show them when filtering. So I have created a way for her to tag those with initially-hidden, but can't wrap my head around how to hide those initially, but then still allow them to show up when an associated filter is clicked.

I've come across this fiddle by desandro, but it's not exactly what I'm looking for because it assumes each item only has 1 class (red, green, OR blue).

EDIT

Here's a fork of desandro's fiddle that I edited to be more like my situation (items can have multiple classes). Fiddle.

FINAL EDIT

The answer seems to be to do the opposite, add an initially-shown class and filter those on page load. So instead of having my client tag everything as initially-shown, I went with this method:

$container.find('.tile:not(.initially-hidden)').addClass('initially-shown');

Because they have 100s of items, and only seem to hide a handful.

Here's an updated fiddle.

Answer 1

I mean there are a couple of ways to achieve this result: On dom ready create a filter that only shows the results you want, then trigger isotope.

<div class="items>
    <div class="item category-1 categor-2 initial-show">An item that displays initially.</div>
    <div class="item category-1 category-2 initially-hidden">An item that is initially hidden.</div>
    <div class="item category-1 category-2 initial-show">An item that displays initially.</div>
    <div class="item category-1 category-2 initially-hidden">An item that is initially hidden.</div>
    <div class="item category-1 category-2 initial-show">An item that displays initially.</div>
</div>

JS

$( document ).ready(function() {
  var PageLoadFilter = '.initial-show';
  $container.isotope({ filter: PageLoadFilter});
});

Your fiddle set to filter red by default: http://jsfiddle.net/KWvME/96/