I have two groups of elements, I’d like to make them all be filter by general filters and also one group be a filter to another.

To explain..I’m making a code to classifying architecture projects (group1), companies that participated (group2) and the type of project (general filters)

I’m trying to use this code: https://codepen.io/desandro/pen/nFrte

// bind filter button click
$('#filters').on( 'click', 'button', function() {
  var filterValue = $( this ).attr('data-filter');
  // use filterFn if matches value
  filterValue = filterFns[ filterValue ] || filterValue;
  $grid.isotope({ filter: filterValue });
});

// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
  var $buttonGroup = $( buttonGroup );
  $buttonGroup.on( 'click', 'button', function() {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    $( this ).addClass('is-checked');
  });
});
.grid {
  border: 1px solid #333;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .element-item ---- */

.element-item {
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  margin: 5px;
  padding: 10px;
  background: #888;
  color: #262524;
}

.element-item > * {
  margin: 0;
  padding: 0;
}
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>

<h2>FILTER ALL</h2>
<div id="filters" class="button-group">  <button class="button is-checked" data-filter="*">A-Z</button><button class="button" data-filter=".filter1">filter1</button><button class="button" data-filter=".filter2">filter2</button><button class="button" data-filter=".filter3">filter3</button><button class="button" data-filter="filter4">filter4</button>
</div>


<h2>ELEMENTS GROUP1</h2>
<div class="grid">
  <div class="element-item filter1" data-category="filter1">
<button class="button" data-filter=".filter5">
  element1</button>
  </div>
<div class="grid">
  <div class="element-item filter1" data-category="filter1">
<button class="button" data-filter=".filter6">
  element2</button>
  </div>
  <div class="element-item filter2" data-category="filter2">
<button class="button" data-filter=".filter7">
  element3</button>
  </div>
    <div class="element-item filter1" data-category="filter1">
<button class="button" data-filter=".filter8">
  element4</button>
  </div>
<div class="element-item filter2" data-category="filter2">
<button class="button" data-filter=".filter9">
  element5</button>
  </div>
  
<h2>ELEMENTS GROUP2</h2>
<div class="grid">
  <div class="element-item filter1 filter8" data-category="filter1">
  element6
  </div>
 <div class="grid">
  <div class="element-item filter2 filter8" data-category="filter2">
  element7
 </div>
  <div class="element-item filter6" data-category="filter6">
  element6
  </div>
  </div>

Read more here: Isotope Filters by Group Elements


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: