Cacher is the code snippet organizer for pro developers

<ul class="filter-nav">
  <li><a href="#" class="all">all</a></li>
  <li><a href="#" class="foo">foo</a></li>
  <li><a href="#" class="bar">bar</a></li>
  <li><a href="#" class="baz">baz</a></li>
</ul>
<div class="filter-item">
  <div class="foo">foo</div>
  <div class="bar">bar</div>
  <div class="baz">baz</div>
  <div class="foo">foo</div>
  <div class="bar">bar</div>
  <div class="baz">baz</div>
      ・
      ・
      ・
</div>

var $item = $('.filter-item').children('div').addClass('all');
$('.filter-nav a').on('click', function() {
  var type = $(this).attr('class');
  $('.filter-item').children('div').hide().filter('.' + type).show();
  return false;
});