When click then adding the active class but Isotope.js filter not working

Question

I am using isotope plugin. According to documentation, I tried the below code but it's not working. When I click on then it's adding the active class but filter not working.

Can you help me out where is the issue in this?

 $('.grid-container-projects').isotope({ itemSelector: '.grid-item', layoutMode: 'fitRows' }); $('.categoryGrid ul li').click(function() { $('.categoryGrid ul li').removeClass('active'); $(this).addClass('active'); var selector = $(this).attr('data-filter'); //alert(selector); $('.grid-container-projects').isotope({ // options itemSelector: selector }); return false; });

 .categoryGrid ul { list-style: none; display: flex; align-items: center; justify-content: space-between; }.categoryGrid ul li { background-color: #dd223d; color: #fff; padding: 10px 30px; -webkit-transition: background-color 2s ease-out; -moz-transition: background-color 2s ease-out; -o-transition: background-color 2s ease-out; transition: background-color 2s ease-out; }.grid-container-projects { width: 100%; }.grid-container-projects.grid-item { text-align: center; height: 300px; width: 31%; margin-right: 15px; margin-bottom: 15px; }.projectsListbg { background-size: cover; background-repeat: no-repeat; background-position: center; width: 100%; height: 300px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 11px 0 rgba(0, 0, 0, 0.2); }.grid-container-projects h3, .grid-container-projects h5 { color: #fff; }

 <div class="categoryGrid"> <ul> <li class="active" data-filter="*">All</li> <li data-filter=".home">Home</li> <li data-filter=".music">Music</li> <li data-filter=".projects">Projects</li> <li data-filter=".uncategorized">Uncategorized</li> </ul> <div class="grid-container-projects"> <div class="grid-item home"> <a href="javascript:void(0);"> <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1558478551-1a378f63328e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)"> <div class="projectContent"> <h3>Demo 1</h3> <h5>Home</h5> </div> </div> </a> </div> <div class="grid-item music"> <a href="javascript:void(0);"> <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1593642531955-b62e17bdaa9c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)"> <div class="projectContent"> <h3>Demo 2</h3> <h5>Music</h5> </div> </div> </a> </div> <div class="grid-item home"> <a href="javascript:void(0);"> <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)"> <div class="projectContent"> <h3>Demo 3</h3> <h5>Home</h5> </div> </div> </a> </div> <div class="grid-item projects"> <a href="javascript:void(0);"> <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1565728744382-61accd4aa148?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)"> <div class="projectContent"> <h3>Demo 4</h3> <h5>Projects</h5> </div> </div> </a> </div> <div class="grid-item music"> <a href="javascript:void(0);"> <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/flagged/photo-1576697010744-a40aedd2dcca?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)"> <div class="projectContent"> <h3>Demo 5</h3> <h5>Music</h5> </div> </div> </a> </div> <div class="grid-item projects"> <a href="javascript:void(0);"> <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1585832770485-e68a5dbfad52?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)"> <div class="projectContent"> <h3>Demo 6</h3> <h5>Projects</h5> </div> </div> </a> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script>

Answer 1

I think you used wrong documentation. Use this one for jQuery: https://isotope.metafizzy.co/filtering.html

 var $grid = $('.grid-container-projects').isotope({ itemSelector: '.grid-item', layoutMode: 'fitRows' }); // filter items on button click $('.categoryGrid ul li').click(function() { $('.categoryGrid ul li').removeClass('active'); $(this).addClass('active'); var filterValue = $(this).attr('data-filter'); $grid.isotope({ filter: filterValue }); });

 .categoryGrid ul { list-style: none; display: flex; align-items: center; justify-content: space-between; }.categoryGrid ul li { background-color: #dd223d; color: #fff; padding: 10px 30px; -webkit-transition: background-color 2s ease-out; -moz-transition: background-color 2s ease-out; -o-transition: background-color 2s ease-out; transition: background-color 2s ease-out; }.grid-container-projects { width: 100%; }.grid-container-projects.grid-item { text-align: center; height: 300px; width: 31%; margin-right: 15px; margin-bottom: 15px; }.projectsListbg { background-size: cover; background-repeat: no-repeat; background-position: center; width: 100%; height: 300px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 11px 0 rgba(0, 0, 0, 0.2); }.grid-container-projects h3, .grid-container-projects h5 { color: #fff; }

 <div class="categoryGrid"> <ul> <li class="active" data-filter="*">All</li> <li data-filter=".home">Home</li> <li data-filter=".music">Music</li> <li data-filter=".projects">Projects</li> <li data-filter=".uncategorized">Uncategorized</li> </ul> <div class="grid-container-projects"> <div class="grid-item home"> <a href="javascript:void(0);"> <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1558478551-1a378f63328e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)"> <div class="projectContent"> <h3>Demo 1</h3> <h5>Home</h5> </div> </div> </a> </div> <div class="grid-item music"> <a href="javascript:void(0);"> <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1593642531955-b62e17bdaa9c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)"> <div class="projectContent"> <h3>Demo 2</h3> <h5>Music</h5> </div> </div> </a> </div> <div class="grid-item home"> <a href="javascript:void(0);"> <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)"> <div class="projectContent"> <h3>Demo 3</h3> <h5>Home</h5> </div> </div> </a> </div> <div class="grid-item projects"> <a href="javascript:void(0);"> <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1565728744382-61accd4aa148?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)"> <div class="projectContent"> <h3>Demo 4</h3> <h5>Projects</h5> </div> </div> </a> </div> <div class="grid-item music"> <a href="javascript:void(0);"> <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/flagged/photo-1576697010744-a40aedd2dcca?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)"> <div class="projectContent"> <h3>Demo 5</h3> <h5>Music</h5> </div> </div> </a> </div> <div class="grid-item projects"> <a href="javascript:void(0);"> <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1585832770485-e68a5dbfad52?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)"> <div class="projectContent"> <h3>Demo 6</h3> <h5>Projects</h5> </div> </div> </a> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script>