Instantly Filter On-Page Elements By Tags (With Javascript & JQuery)

Overview

The purpose of this script is to dynamically show and hide on-page content based on tags. To understand better what is it, just check our page with shed plans where we have used the code from this tutorial. By default all plans are listed on the page, and you see the tags on top. Click on a tag, it becomes great, and all content having this tag is being filtered out. This way the user can quickly see only what they are interested in.

It's possible that you will want this code to work in the opposite direction - have everything hidden by default and show only content for selected tags. I'll show you how to do this as well.

The CSS

We are going to style a little bit the items on the page just so you can display the tags like buttons. Feel free to use entirely different CSS but make sure you keep the same class names.

.tags a
{
   display:block;
   float:left;
   width:110px;
   padding:3px;
   text-align:center;
   background-color:blue;   
   color:white !important;
   font-weight:bold;
   margin:3px;
   text-decoration:none;
}

.tags a.filtered {
   background-color:#EEE;
   color:#888;
}

div.plans
{
  padding:5px;
  border:1px dashed black;
  margin-bottom:8px;
}

I've stripped out some of the CSS for clarity as it isn't the most important part. We just format the tags as buttons and set a.filtered state so the filtered out tags can look different.

The HTML Code

Our tags bubble looks like this:

<div class="tags"><div style="float:left;"><b>Filter out these plans:</b></div> <a href="#" id="freeTag" onclick="setFilter('free');return false;">Free</a> 
<a href="#" id="paidTag" onclick="setFilter('paid');return false;">Paid</a>
<a href="#" id="collectionTag" onclick="setFilter('collection');return false;">Collection</a>
<a href="#" id="barnTag" onclick="setFilter('barn');return false;">Barn</a>
<a href="#" id="gazeboTag" onclick="setFilter('gazebo');return false;">Gazebo</a>
<a href="#" id="greenhouseTag" onclick="setFilter('greenhouse');return false;">Greenhouse</a>
<a href="#" id="otherTag" onclick="setFilter('other');return false;">Other Buildings</a></div>

Mostly pay attention to the ID and the "onclick" part that calls the javascript function, which does all the trick. We will explain everything there.

Also, there is something more. In each DOM HTML element which we want to filter we need to set a class for all tags that are valid for it. In our case the elements are div, so the code is like this:

<div class="plans plans_free plans_paid plans_collection">

So this div will be hidden when either Free, Paid, or Collection tag is pressed. Let's see how is this happening:

The Javascript Has All The Logic

You may be surprised that the code is fairly simple. But to make our lives even easier we used jQuery. So don't forget either to download it or include it from the CDN.

Let's go through the code. First we need a convenient way to remove item from an array. I copied the solution from this page:

Array.prototype.remove = function(elem) {
    var match = -1;

    while( (match = this.indexOf(elem)) > -1 ) {
        this.splice(match, 1);
    }
};

Now follows the entire logic of the filters in just few lines. I'll explain inside with verbose comments:

// here we create a global var filters. We will store all tags that we should filter by here
var filters=new Array();

// this is the function that gets called when you click on a tag.
// filter - is the tag itself
function setFilter(filter)
{
  // first we check what's going on - does the user want to filter by the tag 
  // (i.e. the tag is not yet in the global
  // var filers, or the user wants to remove filtering by this tag.
  if($.inArray(filter, filters)==-1)
  {
     // not found, set filter
     filters.push(filter);
     // now we set filtered class to the tag by ID
     // this lets us to gray it out
     $("#"+filter+"Tag").attr("class","filtered");
  }
  else
  {
     // found, so unset filter and remove "filtered" class from the tag
     $("#"+filter+"Tag").attr("class","");         
     filters.remove(filter);
  }

  // apply filters now
  // first show all divs with class "plans"  
  $(".plans").show();
  
  // then hide all those that have any of the tags with "filter"
  for(i=0;i<filters.length;i++)
  {
    // note we had set a prefix "plan_" just to avoid collision with other possible
    // CSS classes
    $(".plans_"+filters[i]).hide();
  }
  
}

This is really all of it. I think the code is fairly simple to follow, but if you have to see it in full, just view the source of our shed plans list page.

No comments so far.

Be the first to comment!



Check Also These Interesting Articles:

  1. The Office Shed: Is It For You?
  2. 33 Of The Most Amazing Shed Pictures You Have Ever Seen
  3. The Top 11 Shed Improvements from Instructables
  4. Women and Their DIY Projects
  5. Lazy Man's Root Cellar