Разработка - Реализация фильтра с помощью jquery

Делаем разметку с помощью HTML:

HTML:

<div class="wrapper">
  <div class="artboard">
    <div class="filters">
      <div class="filter all active" onclick="filterSelection('all')">all</div>
      <div class="filter yellow" onclick="filterSelection('yellow')">yellow</div>
      <div class="filter blue" onclick="filterSelection('blue')">blue</div>
      <div class="filter pink" onclick="filterSelection('pink')">pink</div>
    </div>
    <div class="filterDivs">
      <div class="filterDiv yellow"></div>
      <div class="filterDiv pink"></div>
      <div class="filterDiv blue"></div>
      <div class="filterDiv pink"></div>
      <div class="filterDiv yellow"></div>
      <div class="filterDiv blue"></div>
      <div class="filterDiv pink"></div>
      <div class="filterDiv blue"></div>
      <div class="filterDiv yellow"></div>
      <div class="filterDiv pink"></div>
      <div class="filterDiv blue"></div>
    </div>
  </div>
</div>

Пишем наш стиль для фильтра:

CSS:

body {
  margin: 0;
}

.wrapper {
  display: flex;
  background: #57068c;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  font-family: Helvetica, sans serif;
  color: #ffffff99;
}
.wrapper .title {
  position: absolute;
  top: 10px;
  left: 20px;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.wrapper .title div {
  background: #ffffff99;
  width: 20px;
  height: 2px;
  margin: 10px 0;
}
.wrapper .credit {
  position: absolute;
  bottom: 10px;
  right: 20px;
  font-family: 'Sacramento', cursive;
}
.wrapper .credit a {
  color: #fff;
  text-decoration: none;
  opacity: .6;
}
.wrapper .credit a:hover {
  opacity: 1;
  text-decoration: underline;
}

.artboard {
  position: relative;
  margin: auto;
  width: 44vw;
  height: 50vh;
}

.filterDivs {
  padding-top: 20px;
}
.filterDivs .filterDiv {
  width: 5vw;
  height: 10vmin;
  display: inline-block;
  margin: 1vw;
  transition: .5s ease-in-out 0s;
}
.filterDivs .yellow {
  background: #FFD568;
  opacity: 1;
}
.filterDivs .blue {
  background: #91E3FF;
  opacity: 1;
}
.filterDivs .pink {
  background: #FF766D;
  opacity: 1;
}
.filterDivs .hide {
  visibility: hidden;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

.filters {
  position: relative;
  margin: auto;
  text-align: center;
}
.filters div {
  display: inline-block;
  text-transform: uppercase;
  cursor: pointer;
  margin: 4px;
}
.filters .active {
  color: #fff;
  border-bottom: 1px solid #fff;
}

И сам фильтр на jquery:

JavaScript:

filterSelection('all');
function filterSelection(f){
  var newActiveFilter=$(".filters ."+f);
  if(newActiveFilter.hasClass('active')){
    //do nothing
  } else {
    //update filter
    $('.active').removeClass('active');
    newActiveFilter.addClass('active');
    
    //apply filter
    if(f=='all'){
      $('.filterDivs').children().removeClass('hide');
    } else {
     $('.filterDivs').children("."+f).removeClass('hide');
     $('.filterDivs').children().not("."+f).addClass('hide');
    }
  }
}

Смотрим наш результат:

Разработка Реализация фильтра с помощью jquery

Ещё ресурсы от baltun