Filter Portfolio JQuery

Question

I try to create simple filterable portfolio using JQuery But I did not get a satisfactory result. I think the best way to learn by creating real applications.

Here My Code:

$(document).ready(function() {
  $('.filter-container .filter-button').click(function(e) {
    e.preventDefault();
    $(this).addClass('active').siblings().removeClass('active');
    $('.portfolio').find('.portfolio-nested[data-filter=' + $(this).data('filter') + ']').fadeIn();
  });
})

.portfolio {
  width: 100%;
  padding: 20px 0;
  background-color: #00f676;
  text-align: center;
  font-family: Raleway, Tahoma;
}

.portfolio ul,
.portfolio li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.portfolio ul {
  margin-bottom: 20px;
}

.portfolio .filter-container li {
  display: inline-block;
  margin-right: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid transparent;
  -moz-transition: all .6s ease-in-out;
  -o-transition: all .6s ease-in-out;
  -webkit-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
  cursor: pointer;
}

.portfolio .filter-container li:last-child {
  margin-right: 0;
}

.portfolio .filter-container li.active,
.portfolio .filter-container li:hover {
  border-bottom: 2px solid #ffffff;
}

.portfolio .portfolio-nested {
  width: 100%;
  height: 200px;
  margin: 0 0 20px;
  background-color: #e1e1e1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="portfolio">
  <div class="container">
    <ul class="filter-container">
      <li data-filter="all" class="filter-button active">All</li>
      <li data-filter="design" class="filter-button">Design</li>
      <li data-filter="graphic" class="filter-button">Grahpic</li>
      <li data-filter="programming" class="filter-button">Porgramming</li>
    </ul>
    <div class="row">
      <div class="col-lg-3">
        <div class="portfolio-nested" data-filter="design">
          Hello World
        </div>
      </div>
      <div class="col-lg-3">
        <div class="portfolio-nested" data-filter="graphic">
          Hello World
        </div>
      </div>
      <div class="col-lg-3">
        <div class="portfolio-nested" data-filter="programming">
          Hello World
        </div>
      </div>
      <div class="col-lg-3">
        <div class="portfolio-nested" data-filter="graphic">
          Hello World
        </div>
      </div>
      <div class="col-lg-3">
        <div class="portfolio-nested" data-filter="programming">
          Hello World
        </div>
      </div>
      <div class="col-lg-3">
        <div class="portfolio-nested" data-filter="design">
          Hello World
        </div>
      </div>
      <div class="col-lg-3">
        <div class="portfolio-nested" data-filter="design">
          Hello World
        </div>
      </div>
      <div class="col-lg-3">
        <div class="portfolio-nested" data-filter="graphic">
          Hello World
        </div>
      </div>
    </div>
  </div>
</section>

Note: Please don't recommended me to using any plugins I'm here for learning

Answer 1

The filter for all is simple. I implemented it giving the class "all" to list items. Then I inserted an if statement if ($(this).hasClass("all)) to show all .portfolio-nested items.

Answer 2

Your code is working fine, except you forgot to hide the extra elements. Try the following:

$(document).ready(function() {
  $('.filter-container .filter-button').click(function(e) {
    e.preventDefault();

    $(this).addClass('active').siblings().removeClass('active');
    $(".portfolio-nested").hide();
    $('.portfolio').find('.portfolio-nested[data-filter=' + $(this).data('filter') + ']').fadeIn();
  });
});

Pay attention to the line $(".portfolio-nested").hide();. This hides all the elements first, and then the next line shows only the elements which match your filter.

PS: You need to handle the filter type All as well.