isotope mutiple instances on same page

Question

I am using jquery isotope to filter some data and i want to use it at 2-3 places on same page.

Jquery code

var $container = $('.filterable');

$container.each(function() {

    $(this).isotope({
      itemSelector: '.item',  
      filter: '*',
      animationOptions: {
         duration: 750,
         easing: 'linear',
         queue: false,
       }
    });

}); //each

//FILTER
$('.filters li a').click(function(){
  var selector = $(this).attr('data-filter');
    $container.isotope({ 
        filter: selector,
        animationOptions: {
         duration: 750,
         easing: 'linear',
         queue: false,
       }
    });
  $('[data-toggle="dropdown"]').parent().removeClass('open');
  return false;
});

html

<div class="row filters">
<div class="col-md-6">
  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Colors <span class="caret"></span> </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#" data-filter=".blue">Blue</a></li>
      <li><a href="#" data-filter=".red">Red</a></li>
      <li class="divider"></li>
      <li><a href="#" class="selected" data-filter="*">All Fabrics</a></li>
    </ul>
  </div>
</div>
<div class="col-md-6">
  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Type <span class="caret"></span> </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#" data-filter=".check">Check</a></li>
      <li><a href="#" data-filter=".plain">Plain</a></li>
      <li class="divider"></li>
      <li><a href="#" class="selected" data-filter="*">All Types</a></li>
    </ul>
  </div>
</div>

<div class="filterable">
  <div class="item plain red"><a href="http://localhost.com/uploads/1.jpg" class="preview"><img class="" src="http://localhost.com/uploads/1.jpg" alt="type" width="75" /></a></div>
  <div class="item check red"><a href="http://localhost.com/uploads/2.jpg" class="preview"><img class="" src="http://localhost.com/uploads/2.jpg" alt="type" width="75" /></a></div>
</div>

I am using same code for different 3 sections where items in <div class="filterable"></div> are same as first section, its perfectly works for first section but other 2 sections shows only 1 item unless i click All types or All colors.

Please help me to resolve this. thanks

possible duplicate of [jQuery Isotope - Multiple Instances on the same page](http://stackoverflow.com/questions/17815116/jquery-isotope-multiple-instances-on-the-same-page) — skobaljic, Nov 18 '14 at 22:29
I have checked other question but couldn't find any solution. Please someone help with isotope experience. thanks — seoppc, Nov 18 '14 at 22:30
In other answer you have a Fiddle with an example, you can copy the code. And btw, instead of `$(this).attr('data-filter')` you can use `$(this).data('filter')` — skobaljic, Nov 18 '14 at 22:43
yes i have tried the same code in other question but that didn't work on my requirements. — seoppc, Nov 18 '14 at 22:58

score 0 · Answer 1 · answered Nov 19 '14 at 03:45

Try adding the class "filters" to your ul instead of div.row,

 <ul class="filters dropdown-menu" role="menu">

like this:

<div class="row">
<div class="col-md-6">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Colors     <span class="caret"></span> </button>
<ul class="filters dropdown-menu" role="menu">
  <li><a href="#" data-filter=".blue">Blue</a></li>
  <li><a href="#" data-filter=".red">Red</a></li>
  <li class="divider"></li>
  <li><a href="#" class="selected" data-filter="*">All Fabrics</a></li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Type <span class="caret"></span> </button>
<ul class="filters dropdown-menu" role="menu">
  <li><a href="#" data-filter=".check">Check</a></li>
  <li><a href="#" data-filter=".plain">Plain</a></li>
  <li class="divider"></li>
  <li><a href="#" class="selected" data-filter="*">All Types</a></li>
</ul>
 </div>
</div>

<div class="filterable">
<div class="item plain red"><a href="http://localhost.com/uploads/1.jpg" class="preview"><img class="" src="http://localhost.com/uploads/1.jpg" alt="type" width="75" /></a></div>
 <div class="item check red"><a href="http://localhost.com/uploads/2.jpg" class="preview"><img class="" src="http://localhost.com/uploads/2.jpg" alt="type" width="75" /></a></div>
 </div>

isotope mutiple instances on same page

1 Answers1