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.

any reason you can't just use `style="display:none;"`, or set the css of `.initially-hidden` to have `display:none`? — DLeh, Oct 28 '14 at 19:00
Show us the code you have already - this is likely a solution for CSS. — rm-vanda, Oct 28 '14 at 19:01

Edward · Accepted Answer · 2014-10-28T19:18:02.130

2

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/

edited Oct 28 '14 at 19:18

answered Oct 28 '14 at 19:10

Edward

3,061
6
32
52

But I want all filters to show, with the exception of initially-hidden. That's what I don't know how to do. Since category-2 can also have a class of initially-hidden or not, that's what makes this trickier. – Corey Oct 28 '14 at 19:11
add class initial-show on items you want to show and filter by that? – Edward Oct 28 '14 at 19:14
This works, but instead of my client having to tag everything as initially-shown, I did this instead: `$container.find('.item:not(.initially-hidden)').addClass('initially-shown');` before calling isotope. – Corey Oct 28 '14 at 19:26

score 1 · Answer 2 · answered Oct 28 '14 at 19:06

To best work with Isotope, do the reverse -

instead of .initially-hidden do .initially-shown and have the filter default to that.

$container.isotope({ filter: '.initially-shown'});

or perhaps you can do a selector like this:

$container.isotope({ filter: ':not(.initially-shown)'});

but I doubt that would work...

score 0 · Answer 3 · answered Aug 17 '15 at 21:26

0

When I am trying this, the items that are not loaded on the initial load (initially-shown), do not show when you click other views.

answered Aug 17 '15 at 21:26

Frank

89
2
12

jQuery Isotope: Hiding items initially

3 Answers3

JS