%20%20%3Cstyle%3E%0Aul%23filterOptions%20%7Bmargin%3A%200%200%2030px%3Boverflow%3A%20hidden%3B%20display%3A%20flex%3B%20align-items%3A%20center%3B%20list-style%3A%20none%3B%20padding%3A0%3B%7D%0Aul%23filterOptions%20label%20%7Bmargin%3A0%2015px%200%200%3B%20font-weight%3A%20600%7D%0Aul%23filterOptions%20li%3Anot%28%3Alast-child%29%20%7B%20margin-right%3A%204px%7D%0Aul%23filterOptions%20li%20a%20%7Bpadding%3A%200%2020px%3B%20border%3A%201px%20solid%20var%28--main-color%29%3B%20background-color%3A%20transparent%3B%20color%3A%20var%28--main-color%29%3B%20font-weight%3A%20500%3B%20line-height%3A%2033px%3B%20text-decoration%3A%20none%3B%20display%3A%20block%3B%20padding%3A0%2020px%3B%20text-align%3A%20center%3B%20min-width%3A%2080px%7D%0Aul%23filterOptions%20li%20a%3Ahover%2C%20ul%23filterOptions%20li.active%20a%20%7B%20background-color%3A%20var%28--main-color%29%3B%20color%3A%23fff%3B%7D%0A%23ourHolder%20%7B%20width%3A%20100%25%3B%20display%3A%20flex%3B%20flex-wrap%3A%20wrap%3B%20margin%3A%200%20-15px%7D%0A%23ourHolder%20div.item%20%7Btext-align%3A%20center%3B%20flex-basis%3A%20calc%2833.33%25%20-%2030px%29%3B%20border%3A%201px%20solid%20%23ddd%3B%20margin%3A%2015px%3B%20display%3A%20flex%3B%20justify-content%3A%20center%3B%20align-items%3A%20center%3B%20min-height%3A%20175px%3B%7D%0A%23ourHolder%20div.item%20img%20%7Bmax-width%3A%20245px%3B%20max-height%3A%20105px%7D%0A%0A%40media%20%28max-width%3A%20768px%29%20%7B%0A%20%20ul%23filterOptions%20%7Bflex-wrap%3A%20wrap%3B%7D%0A%20%20ul%23filterOptions%20label%20%7Bflex-basis%3A%20100%25%3B%20margin-bottom%3A%208px%7D%0A%20%20ul%23filterOptions%20li%20%7Bmargin-bottom%3A%204px%7D%0A%20%20%23ourHolder%20%7Bwidth%3A%20auto%3B%20margin%3A0%20-10px%3B%7D%0A%20%20%23ourHolder%20div.item%20%7Bwidth%3A%20calc%2850%25%20-%2015px%29%3B%20margin%3A7.5px%207.5px%3B%20flex-basis%3A%20calc%2850%25%20-%2015px%29%3B%20overflow%3A%20hidden%3B%7D%0A%20%20%23ourHolder%20div.item%20img%20%7Bmax-width%3A%20100%25%7D%0A%7D%0A%3C%2Fstyle%3E%0A%0A%3Cscript%0A%20%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.5.1.min.js%22%0A%20%20integrity%3D%22sha256-9%2FaliU8dGd2tb6OSsuzixeV4y%2FfaTqgFtohetphbbj0%3D%22%0A%20%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E%0A%0A%3Cul%20id%3D%22filterOptions%22%3E%0A%20%20%20%20%3Clabel%20for%3D%22%22%3EFilter%3C%2Flabel%3E%0A%20%20%20%20%3Cli%20class%3D%22active%22%3E%3Ca%20href%3D%22%23%22%20class%3D%22all%22%3EAll%3C%2Fa%3E%3C%2Fli%3E%0A%20%20%20%20%3Cli%3E%3Ca%20href%3D%22%23%22%20class%3D%22cat1%22%3E%23%2C%20A%20-%20D%3C%2Fa%3E%3C%2Fli%3E%0A%20%20%20%20%3Cli%3E%3Ca%20href%3D%22%23%22%20class%3D%22cat2%22%3EE%20-%20H%3C%2Fa%3E%3C%2Fli%3E%0A%20%20%20%20%3Cli%3E%3Ca%20href%3D%22%23%22%20class%3D%22cat3%22%3EI%20-%20L%3C%2Fa%3E%3C%2Fli%3E%0A%20%20%20%20%3Cli%3E%3Ca%20href%3D%22%23%22%20class%3D%22cat4%22%3EM%20-%20P%3C%2Fa%3E%3C%2Fli%3E%0A%20%20%20%20%3Cli%3E%3Ca%20href%3D%22%23%22%20class%3D%22cat5%22%3EQ%20-%20T%3C%2Fa%3E%3C%2Fli%3E%0A%20%20%20%20%3Cli%3E%3Ca%20href%3D%22%23%22%20class%3D%22cat6%22%3EU%20-%20Z%3C%2Fa%3E%3C%2Fli%3E%0A%3C%2Ful%3E%0A%0A%3Cdiv%20id%3D%22ourHolder%22%3E%0A%20%20%3Cdiv%20class%3D%22item%20cat1%22%3E%0A%20%20%20%20%3Cimg%20src%3D%22https%3A%2F%2Ftaisin.24k-designs.com%2Fwp-content%2Fuploads%2F2020%2F10%2Flogo-3m.jpg%22%20alt%3D%22%22%20%2F%3E%0A%20%20%3C%2Fdiv%3E%0A%20%20%3Cdiv%20class%3D%22item%20cat1%22%3E%0A%20%20%20%20%3Cimg%20src%3D%22https%3A%2F%2Ftaisin.24k-designs.com%2Fwp-content%2Fuploads%2F2020%2F10%2Flogo-astro.jpg%22%20alt%3D%22%22%20%2F%3E%0A%20%20%3C%2Fdiv%3E%0A%20%20%3Cdiv%20class%3D%22item%20cat1%22%3E%0A%20%20%20%20%3Cimg%20src%3D%22https%3A%2F%2Ftaisin.24k-designs.com%2Fwp-content%2Fuploads%2F2020%2F10%2Flogo-abb.jpg%22%20alt%3D%22%22%20%2F%3E%0A%20%20%3C%2Fdiv%3E%0A%20%20%3Cdiv%20class%3D%22item%20cat1%20cat2%20cat3%22%3E%0A%20%20%20%20%3Cimg%20src%3D%22https%3A%2F%2Ftaisin.24k-designs.com%2Fwp-content%2Fuploads%2F2020%2F10%2Flogo-ccg.jpg%22%20alt%3D%22%22%20%2F%3E%0A%20%20%3C%2Fdiv%3E%0A%20%20%3Cdiv%20class%3D%22item%20cat4%22%3E%0A%20%20%20%20%3Cimg%20src%3D%22https%3A%2F%2Ftaisin.24k-designs.com%2Fwp-content%2Fuploads%2F2020%2F10%2Flogo-3f.jpg%22%20alt%3D%22%22%20%2F%3E%0A%20%20%3C%2Fdiv%3E%0A%20%20%3Cdiv%20class%3D%22item%20cat5%22%3E%0A%20%20%20%20%3Cimg%20src%3D%22https%3A%2F%2Ftaisin.24k-designs.com%2Fwp-content%2Fuploads%2F2020%2F10%2Flogo-belden.jpg%22%20alt%3D%22%22%20%2F%3E%0A%20%20%3C%2Fdiv%3E%0A%20%20%3Cdiv%20class%3D%22item%20cat6%22%3E%0A%20%20%20%20%3Cimg%20src%3D%22https%3A%2F%2Ftaisin.24k-designs.com%2Fwp-content%2Fuploads%2F2020%2F10%2Flogo-brother.jpg%22%20alt%3D%22%22%20%2F%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%3Cscript%3E%0AjQuery%28document%29.ready%28function%28%29%20%7B%0A%20%20%20%20%2F%2F%20store%20anything%20commonly%20called%20in%20variables%20to%20speed%20up%20your%20code%0A%20%20%20%20const%20%24active%20%3D%20jQuery%28%27%23filterOptions%20li.active%20a%27%29.attr%28%27class%27%29%3B%0A%20%20%20%20const%20%24ourHolder%20%3D%20jQuery%28%27%23ourHolder%27%29%3B%0A%20%20%20%20%2F%2F%20hide%20all%20elements%20that%20aren%27t%20in%20the%20%24active%20class%0A%20%20%20%20%2F%2F%24ourHolder.children%28%27div%3Anot%28.%27%20%2B%20%24active%20%2B%20%27%29%27%29.hide%28%29%3B%0A%20%20%20%20jQuery%28%27%23filterOptions%20li%20a%27%29.click%28function%28%29%20%7B%0A%20%20%20%20%20%20%2F%2F%20store%20anything%20commonly%20called%20in%20variables%20to%20speed%20up%20your%20code%0A%20%20%20%20%20%20const%20%24this%20%3D%20jQuery%28this%29%0A%20%20%20%20%20%20const%20ourClass%20%3D%20%24this.attr%28%27class%27%29%3B%0A%20%20%20%20%20%20%0A%20%20%20%20%20%20%2F%2F%20reset%20the%20active%20class%20on%20all%20the%20buttons%0A%20%20%20%20%20%20jQuery%28%27%23filterOptions%20li%27%29.removeClass%28%27active%27%29%3B%0A%20%20%20%20%20%20%2F%2F%20update%20the%20active%20state%20on%20our%20clicked%20button%0A%20%20%20%20%20%20%24this.parent%28%29.addClass%28%27active%27%29%3B%0A%20%20%20%20%20%20%0A%20%20%20%20%20%20if%20%28ourClass%20%3D%3D%3D%20%27all%27%29%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20show%20all%20our%20items%0A%20%20%20%20%20%20%20%20%24ourHolder.children%28%27div.item%27%29.show%28%29%3B%20%0A%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20hide%20all%20elements%20that%20don%27t%20share%20ourClass%0A%20%20%20%20%20%20%20%20%24ourHolder.children%28%27div%3Anot%28.%27%20%2B%20ourClass%20%2B%20%27%29%27%29.hide%28%29%3B%0A%20%20%20%20%20%20%20%20%2F%2F%20show%20all%20elements%20that%20do%20share%20ourClass%0A%20%20%20%20%20%20%20%20%24ourHolder.children%28%27div.%27%20%2B%20ourClass%29.show%28%29%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20return%20false%3B%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%29%3B%0A%0A%3C%2Fscript%3E
