Filter portfolio

by marusti

HTML

<ul class="portfolio-filter">
  <li class="active"><a href="#" class="all">All</a></li>
  <li><a href="#" class="cms">CMS</a></li>
  <li><a href="#" class="joomla">Joomla</a></li>
  <li><a href="#" class="mozilo">moziloCMS</a></li>
  <li><a href="#" class="bootstrap">Bootstrap</a></li>
  <li><a href="#" class="responsive">Responsive</a></li>
</ul>
<div class="portfolio-showcase">
  <div class="item cms joomla responsive">
    <img src="http://www.marusti.com/img/references/flyingducks.jpeg" alt="Accrington Stanley" />
    <h3>Flying Ducks</h3>
  </div>
  <div class="item bootstrap responsive">
    <img src="http://www.marusti.com/img/references/german-grinds-wicklow.png" alt="Arsenal" />
    <h3>German Grinds</h3>
  </div>
  <div class="item cms mozilo bootstrap responsive">
    <img src="http://www.marusti.com/img/references/wellness-fenske.jpeg" alt="Burton Albion" />
    <h3>Wellness</h3>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0
}


/*- FILTER OPTIONS -*/

.portfolio-filter {
  display: flex;
  justify-content: center;
  height: 52px;
  overflow: hidden;
  list-style: none;
  margin-bottom: .5em
}

.portfolio-filter li {
  height: 52px;
  margin-right: .5em;
  float: left;
}

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

.portfolio-filter li a {
  height: 50px;
  padding: 0 20px;
  border: 1px solid #3c8dc5;
  border-radius: 4px;
  background: #fff;
  color: #3c8dc5;
  font-weight: bold;
  line-height: 50px;
  text-decoration: none;
  display: block;
}

.portfolio-filter li a:hover {
  background: #3c8dc5;
  color: #fff
}

.portfolio-filter li.active a {
  background: #3c8dc5;
  color: #fff
}


/*- -*/


/*- OUR DATA HOLDER -*/

.portfolio-showcase {
  display: -webkit-flex;
  display: flex;
}

.portfolio-showcase div.item {
  width: 33.33%;
  text-align: center;
  padding:1em
}

.portfolio-showcase div.item h3 {
  margin-top: 10px;
  font-size: 16px;
  line-height: 20px;
}


/*- -*/

img {
  max-width: 100%;
  height: auto
}

JavaScript

$(document).ready(function() {
  $('.portfolio-filter li a').click(function() {
    // fetch the class of the clicked item
    var portfolio = $(this).attr('class');

    // reset the active class on all the buttons
    $('.portfolio-filter li').removeClass('active');
    // update the active state on our clicked button
    $(this).parent().addClass('active');

    if (portfolio == 'all') {
      // show all our items
      $('.portfolio-showcase').children('div.item').fadeIn(1000);
    } else {
      // hide all elements that don't share ourClass
      $('.portfolio-showcase').children('div.item').hide();
      // show all elements that do share ourClass
      $('.portfolio-showcase').children('div.' + portfolio).fadeIn(1500);
    }
    return false;
  });
});