title: jquery-isotope filtering links within filtered divs (tags system-like)
body: <p>I'm asking this first question because I'm quite stuck with this following code.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>I'm facing 2 paths : 
  1. Go with an additional isotope plugin from Gatsby : IsoSelective and it goes like this: </p>
  
  <pre><code>$container.isoSelective({
      linkSelector: '.filter',    // this is the filter link 
      attrSelector: 'rel',           // the attribute containing the filter
      activeClass: 'selected'        // class to add to selected
  });
  </code></pre>
  
  <p>But doesn't seem to be happy if my triggers are inside the targets.</p>
  
  <ol>
  <li><p>A fork I did on an existing JSFiddle code which work awesome but cannot run inside isotope until now :</p>
  
  <p><a href="http://jsfiddle.net/gVpqx/3/" rel="nofollow">http://jsfiddle.net/gVpqx/3/</a></p></li>
  </ol>
  
  <p>—————</p>
  
  <p>And finally here is my an extract from my code in html page :</p>
  
  <pre><code>&lt;div class="articlesBlock"&gt;
  &lt;div class="blockBox"&gt;
  &lt;a href="#"&gt;&lt;p&gt;Lorem ipsum paragraph.&lt;/p&gt;&lt;/a&gt;   
  &lt;em&gt;&lt;a class='filter base-first-tag' rel='.first-tag' href='#'&gt;The Base First Tag&lt;/a&gt;&lt;/em&gt;
  &lt;em&gt;&lt;a class='filter second-tag' rel='.second-tag' href='#'&gt;The Second Tag&lt;/a&gt;&lt;/em&gt;
  &lt;em&gt;&lt;a class='filter third-tag' rel='.third-tag' href='#'&gt; The Third Tag&lt;/a&gt;&lt;/em&gt;
  &lt;/div&gt;  
  &lt;/div&gt;
  
  &lt;div class="articlesBlock"&gt;
  &lt;div class="blockBox"&gt;
  &lt;a href="#"&gt;&lt;p&gt;Lorem ipsum paragraph.&lt;/p&gt;&lt;/a&gt;   
  &lt;em&gt;&lt;a class='filter base-first-tag' rel='.base-first-tag' href='#'&gt;The First also Base Tag&lt;/a&lt;/em&gt;
  &lt;em&gt;&lt;a class='filter second-tag' rel='.second-tag' href='#'&gt;The Second Tag&lt;/a&gt;&lt;/em&gt;
  &lt;em&gt;&lt;a class='filter third-tag' rel='.third-tag' href='#'&gt; The Third Tag&lt;/a&gt;&lt;/em&gt;
  &lt;/div&gt;  
  &lt;/div&gt;
  
  &lt;div class="articlesBlock"&gt;
  &lt;div class="blockBox"&gt;
  &lt;a href="#"&gt;&lt;p&gt;Lorem ipsum paragraph.&lt;/p&gt;&lt;/a&gt;   
  &lt;em&gt;&lt;a class='filter first-tag' rel='.first-tag' href='#'&gt;The First Tag&lt;/a&gt;&lt;/em&gt;
  &lt;em&gt;&lt;a class='filter second-new-tag' rel='.second-new-tag' href='#'&gt;The New Second Tag&lt;/a&gt;&lt;/em&gt;
  &lt;em&gt;&lt;a class='filter third-tag' rel='.third-tag' href='#'&gt; The Third Tag&lt;/a&gt;&lt;/em&gt;
  &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Below is the JSFiddle with the IsoSelective approach, but still doesn't work.</strong></p>
  
  <p><a href="http://jsfiddle.net/48nh6/1/" rel="nofollow">http://jsfiddle.net/48nh6/1/</a></p>
  
  <p>What do you think ?</p>
  
  <p>Thanks</p>