Question

I’m asking this first question because I’m quite stuck with this following code.

Basically : I’d like to toggle divs visibility by filtering them, based on a specific content.
Each div contains several “tags”. When a “tag” is clicked, only divs that contains same “tag” get displayed. Looks simple said like that.

But I’m running inside an isotope div container. More important, there is no external tag menu, so the trigger is right inside the div that will be toggled.

I’m facing 2 paths :
1. Go with an additional isotope plugin from Gatsby : IsoSelective and it goes like this:

$container.isoSelective({
    linkSelector: '.filter',    // this is the filter link 
    attrSelector: 'rel',           // the attribute containing the filter
    activeClass: 'selected'        // class to add to selected
});

But doesn’t seem to be happy if my triggers are inside the targets.

1. A fork I did on an existing JSFiddle code which work awesome but cannot run inside isotope until now :

   http://jsfiddle.net/gVpqx/3/

—————

And finally here is my an extract from my code in html page :

<div class="articlesBlock">
<div class="blockBox">
<a href="#"><p>Lorem ipsum paragraph.</p></a>   
<em><a class='filter base-first-tag' rel='.first-tag' href='#'>The Base First Tag</a></em>
<em><a class='filter second-tag' rel='.second-tag' href='#'>The Second Tag</a></em>
<em><a class='filter third-tag' rel='.third-tag' href='#'> The Third Tag</a></em>
</div>  
</div>

<div class="articlesBlock">
<div class="blockBox">
<a href="#"><p>Lorem ipsum paragraph.</p></a>   
<em><a class='filter base-first-tag' rel='.base-first-tag' href='#'>The First also Base Tag</a</em>
<em><a class='filter second-tag' rel='.second-tag' href='#'>The Second Tag</a></em>
<em><a class='filter third-tag' rel='.third-tag' href='#'> The Third Tag</a></em>
</div>  
</div>

<div class="articlesBlock">
<div class="blockBox">
<a href="#"><p>Lorem ipsum paragraph.</p></a>   
<em><a class='filter first-tag' rel='.first-tag' href='#'>The First Tag</a></em>
<em><a class='filter second-new-tag' rel='.second-new-tag' href='#'>The New Second Tag</a></em>
<em><a class='filter third-tag' rel='.third-tag' href='#'> The Third Tag</a></em>
</div>  
</div>

Below is the JSFiddle with the IsoSelective approach, but still doesn’t work.

http://jsfiddle.net/48nh6/1/

What do you think ?

Thanks

Answer 1

So here’s what’s going on: isoSelective acts as a toggle. Individual filters can be on/off in combinations — not just one filter on vs one filter off. Not sure if that’s what you want, but here’s an example. I made the active (selected) class bold for demonstration.

http://jsfiddle.net/48nh6/4/ NOte that in this version, I moved the tag classes to the container — not on the anchors themselves. Since you want to show/hide (filter) the blocks and not the links, the tag classes need to be moved up to the top level.

1. Using the top nav filters (not in the isotope list) click All. Notice, it goes “off” and all elements are hidden.
2. Click First Tag. Note that it goes bold.
3. Click Third Old Tag. Note that it is also bold; First Tag stays bold. Now you see two items — one with Old First and one with Third Old.

Now. You can repeat the same exercise with the tags internal to the isotopes.
1. Make sure “All” is toggled at the top nav
2. Click Third Tag in the first box. Note only two items active
3. Click The Base First Class in the first box. Note all three now appear.

Also notice that the tags are only “active” in the first box. If you click “The First and also Base Class” in Box 2, it toggles “active” but it was already active because of the first one! So nothing changes (except the text becomes bold).

I offer two alternatives:

1. If you want the inclusive nature like isoselective (taht is, toggle instead of exclusive filters) then you wire up isoselective to a top-level filter and “faux click” it when an internal filter is clicked.
2. If you don’t want the inclsuive nature like isoselective, then cook your own solution.

Option 1: http://jsfiddle.net/gy8Xf/1/

$container.isoSelective({
    linkSelector: '#filters .filter',
    attrSelector: 'rel',
    activeClass: 'selected'
});

Select only on #filters .filter, then…

$container.find('a').click(function()
                           {
                               var rel = $(this).attr('rel');

                               // get all the #filters .filter elements that have the same rel
                               var $filters = $('#filters .filter').filter(function()
                                                            {
                                                                return $(this).attr('rel') == rel;
                                                            });

                                // trigger a click
                               $filters.click();

                           });

Anytime a link is clicked inside container, find the #filters .filter with the same rel attribute as the link that was just clicked, and trigger a click.

Option 2: http://jsfiddle.net/9ThvU/1/

$('#filters .filter, #content .filter').click(function()
                           {
                               var rel = $(this).attr('rel');

                               $container.isotope( {filter: rel});
                           });

Simply, anytime an anchor is clicked (I kept the #filters, not sure if you want them) set the new isotope filter according to the rel attribute.