Isotope filter buttons don't work!

Hi there!

Can anybody check my link :

Buttons dont work!

What am I doing wrong?


Which buttons do not work, and what should they do but currently don’t?

On this link should work isotope filters, search is working, but filter buttons dont


1 Like

Hi @Andrew_Antoshkin,

I had the same problem. I find the solution by adding some code.

The Code:

<script src=""></script>
// document ready wrapper
$(document).ready( function() {

  // find all filter buttons
  const filterToggles = document.querySelectorAll('[data-filter]');

  // go over each filter button
  filterToggles.forEach(function(toggle) {
    let attrVal = toggle.getAttribute(['data-filter']); // find the filter attr
    let newVal = attrVal.toLowerCase().replace(' ', '-'); // hyphenate filter attr val
    toggle.setAttribute('data-filter', newVal); // set filter attr with new val

  // go over all collection item category label elems
  $('.w-dyn-item .category').each(function(index, element) {
  		var _this = $( element );
      // lowercase, hyphenate and add as a class to dyn-item for isotope filtering
  		_this.closest('.w-dyn-item').addClass( _this.text().toLowerCase().replace(' ', '-'));      

  // quick search regex
  let qsRegex;
  let buttonFilter;

  // init Isotope
  const $grid = $('.grid').isotope({
      itemSelector: '.w-dyn-item',
      stagger: 30,
  		filter: function() {
      	var $this = $(this);        
      	var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
      	var buttonResult = buttonFilter ? $ buttonFilter ) : true;
        return searchResult && buttonResult;

  // reveal all items after init
  const $items = $grid.find('.w-dyn-item');
  $grid.addClass('is-showing-items').isotope( 'revealItemElements', $items );

  $('#filters').on('click', 'button', function() {
      buttonFilter = $( this ).attr('data-filter');

  // use value of search field to filter
  const $quicksearch = $('#quicksearch').keyup(debounce(function() {
    qsRegex = new RegExp($quicksearch.val(),'gi');

  // change is-checked class on buttons
  $('.button-group').each(function( i, buttonGroup ) {
    const $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'button', function() {
      $( this ).addClass('is-checked');

  // debounce so filtering doesn't happen every millisecond
  function debounce(fn, threshold) {
      let timeout;
      return function debounced() {
        if ( timeout ) {
          clearTimeout( timeout );
        function delayed() {
          timeout = null;
        setTimeout( delayed, threshold || 100 );

  // disable search from submitting
  $('#quicksearch').on('keyup keypress', function(e) {
    const keyCode = e.keyCode || e.which;
    if (keyCode === 13) {
      return false;

1 Like

Thank You!!!) Yeah!
I spent so much time for it, you just save me!)
Can I ask you help in one more thing?
On this page in isotope filter button ALL dont showing
Whats the proplem?
How to styling the button ALL?
Thanks in advance!

Hi @Andrew_Antoshkin,

I can have a look at your preview link. Have you already add margin or padding?


Yes! please.

Check my preview :

ISOTOPE is set on the page DETI

Thank you!

Hi @Andrew_Antoshkin, sorry I was not able to find the problem. I suggest you to take the steps again. Sometimes when I can’t find the problem I create a new project and start this part from scratch. It must work hopefully, Good luck!

Thanks anyway, man!))

You deserve a prize for this one!


Would you possible be able to give me a hand?

This is my read only link:

Not sure why but i still cant get this working.