How to filter list of items on button click using Isotope

2 minute(s) reading

Problem

How to filter items on button click with filter option. So items that match that filter will be shown using Isotope?

Final output

By completely reading this article you would be able to filter items by click on button of selected options  with default animation provided by Isotope.

Isotope filtration on button click final output
Isotope filtration on button click final output

Sometimes we want to filter a list of items on button click with certain filter options.

Isotope is a package or library which gives you great animation effect which filtering and it only shows the elements which match that filter. 

So let’s start 🙂 

Solution

1. Define Isotope package JavaScript CDN in your script section.

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

2. Define filter buttons inside div which should have an id in my case it is id=”filters” and in each button give class or filter type inside data-filter attribute.

<div id="filters" class="button-group text-center">
    <button class="btn btn-primary" data-filter="*">All</button>
    <button class="btn btn-primary" data-filter=".coffee">Coffee</button>
    <button class="btn btn-primary" data-filter=".rest">Resturant</button>
    <button class="btn btn-primary" data-filter=".store">Store</button>                
</div>

3. Just above the list of items, put a class inside div tag as “grid” and give each item a filter option class e-g: car, coffee or store etc. 
And also specify element-item class in all items div.

<div class="row">
    <div class="col-md-12">
        <div class="grid">
              <div class="element-item col-md-4 coffee">
                  <div class="card" style=" margin-top: 20px;">
                    <div class="card-body">
                      <h5 class="card-title">Coffee A</h5>        
                      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                  </div>
              </div>
              <div class="element-item col-md-4 store">
                  <div class="card" style="margin-top: 20px;">
                    <div class="card-body">
                      <h5 class="card-title">Store A</h5>        
                      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                  </div>
              </div>
              <div class="element-item col-md-4 rest">
                  <div class="card" style="margin-top: 20px;">
                    <div class="card-body">
                      <h5 class="card-title">Resturant A</h5>        
                      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                  </div>
              </div>        
        </div>
    </div>              
</div> 

4. Great 🙂 
Finally just use the below JavaScript code which make the Isotope work with some awesome animations.

<script>
    // init Isotope
    var $grid = $('.grid').isotope({
      itemSelector: '.element-item',
      layoutMode: 'fitRows'
    });
    // filter functions
    var filterFns = {
      // show if number is greater than 50
      numberGreaterThan50: function() {
        var number = $(this).find('.number').text();
        return parseInt( number, 10 ) > 50;
      },
      // show if name ends with -ium
      ium: function() {
        var name = $(this).find('.name').text();
        return name.match( /ium$/ );
      }
    };
    
    // bind filter button click
    $filters = $('#filters').on( 'click', 'button', function() {
      var $this = $( this );
      var filterValue;
      if ( $this.is('.is-checked') ) {
        // uncheck
        filterValue = '*';
      } else {
        filterValue = $this.attr('data-filter');
        $filters.find('.is-checked').removeClass('is-checked');
      }
      
      // Uncomment this line if you want to make a filter button behave as a toggle
      //$this.toggleClass('is-checked');
    
      // use filterFn if matches value
      filterValue = filterFns[ filterValue ] || filterValue;
      $grid.isotope({ filter: filterValue });
    });
</script>
Html file
Make sure to match the classes and id mentioned in html file
JavaScript file

Congratulations now you can filter your list items on button click using Isotope with animation effects 🙂 

Leave a Reply