Filtering Blocks v2

Avatar of Chris Coyier
Chris Coyier on

This is an update to the first version of filtering blocks I did a while back. The idea is that you have a long list or large set of “blocks” on the page. Each block belongs to a certain group. There is navigation on the page for viewing all of them at once, or selecting which group you would like to see. Selecting a particular group hides the blocks from any other group, hence “filtering”.

 

View Demo   Download Files

 

HTML

Each block has class names applied to it for the groups it belongs to. Here are two examples. The both belong to the group “all”, the top one “adv” and the bottom one “cla”.

<div class="all adv">
<img src="images/flavor-curry.jpg" alt="" />
<h4>Sweet Curry With Saffron</h4>
<p>Lusciously mellow with notes of overripe berries, 55% Hawaiian dark chocolate meets its soulmate in sweet curry - awash in spices including coriander, tumeric, cumin and cardamom and sprinkled with rare saffron. This spicy melange is slowly steeped in fresh coconut puree and gently blended with the chocolate. The taste rushes over you in waves - fragrant curry, chased by coconut, then the lingering, raisiny sweetness of chocolate. Available in <a href="/store/products/Chocolatier_s_Choice-5-2.html">Chocolatier's Choice</a> and <a href="/store/products/Adventurous_Collection-3-2.html">Adventurous Collection</a>.</p>
</div>

<div class="all cla">
<img src="images/flavor-vanilla.jpg" alt="" />
<h4>Lucille's Vanilla </h4>
<p>For those who prefer milder chocolate, this winsome truffle will ignite a lifelong love affair. Gail uses a dark blend in this recipe handed down through four generations of the Guittard family of chocolate makers. It tastes like a rich spoonful of homemade chocolate pudding - just like Gail's mom, Lucille, made on the stovetop in their family farm's kitchen. Available in <a href="/store/products/Chocolatier_s_Choice-5-2.html">Chocolatier's Choice</a> and <a href="http://gailambrosius.com/store/products/Classic_Collection-2-2.html">Classic Collection</a>.</p>
</div>

Then the navigation includes REL attributes that reference those classes:

<div id="flavor-nav">
    <a rel="all" class="current">All</a> 
    <a rel="cla">Classic</a> 
    <a rel="adv">Adventurous</a> 
    <a rel="tea">Tea-Inspired</a> 
</div>

jQuery JavaScript

The plan in plain English:

  1. When a link in the filtering navigation is clicked…
  2. Fade down all blocks (visual indication something is changing)
  3. Remove “current” class from all navigation and apply it to newly clicked navigation
  4. Figure out which group should be showing from the REL attribute
  5. Any flavor NOT a part of the group, slide up
  6. Any flavor that IS a part of the group, slide down
  7. Fade back up all blocks
$(function() {

	var newSelection = "";
	
	$("#flavor-nav a").click(function(){
	
	    $("#all-flavors").fadeTo(200, 0.10);
	
		$("#flavor-nav a").removeClass("current");
		$(this).addClass("current");
		
		newSelection = $(this).attr("rel");
		
		$(".flavor").not("."+newSelection).slideUp();
		$("."+newSelection).slideDown();
		
	    $("#all-flavors").fadeTo(600, 1);
		
	});
	
});

This leads to a smoother experience than we had in version 1. Primarily because of the use of the .not() native jQuery filter. Before, we just “slid up” all the flavors and then “slid down” the correct ones. That means that every single flavor went through animation on every single navigation change. But that isn’t always necessary. For example if you are viewing one sub-set, then click back to “all”, those currently showing blocks don’t need to be animated, just all the other ones need to grow out. This solves that.