css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

This Pen is a fork of Dave DeSandro's Pen Isotope - filtering with search field.


  1. Thank you, this rules!

  2. This is exactly what I was after! You saved me hours.

  3. I'm not seeing the search working at the moment - is anyone else having issues? Would love to be able to use this - exactly what I need right now!

  4. Same issue. Search seems to be "semi working". If you search for "Gold" and then hit the Metal filter button. Only Gold will show. Hit the All filter button and still only gold is showing. Remove search, still gold. Have to hit a filter button and then go back to all to get it to reset...

  5. The search is not working due to a typo on line 26 of the JS code. It's $container.isotope(); Should be $grid.isotope();

  6. @xhezairi Thanks for the fix! I've updated the pen.

  7. Relatively new to coding in general & brand new to codepen. Thank you Dave @desandro for this great work. I am trying to learn how your button selection tools work. I copied your HTML, CSS, and JS code into an online code editor--removing all the w3 provided code and replacing it with yours. I also included the two JS links from your settings as script links. When I run the code on the w3 site everything looks the same, but none of the filtering (button or search bar) work. Any idea what I might have missed or done wrong? If it helps--this is the page that I removed the w3 code and replaced it with yours: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_elements

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.