enavu webdevmania tutsvalley psdestination
visit the enavu network
9 Comments Article Title Overlay Article Title

Client side filtering data with jQuery

In this tutorial we are going to make a really easy to build filtering system with jQuery. There will be no AJAX or PHP, just HTML and jQuery.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

The first demo is styled version of this tutorial, and the second demo is non styled version.

How does it look?


Yes, that’s it. No CSS in the tutorial, but the source code and the demo include a styled version. You can see the demo here


That’s the styled version. You can see the demo here

How will it work?

The filter links will have an ID that matches a certain category, and the list items that hold our content will have CLASSES that match one or more category. So when a filter link is clicked jQuery will get the ID of it which is a certain category and will hide all list items that don’t have that category in their classes.

Let’s start


	<!-- the filters div -->
	<div id='filters'><a href='#'>All</a> <a href='#' id='bestof'>Best Of</a> <a href='#' id='jquery'>jQuery</a> <a href='#' id='php'>PHP</a> <a href='' id='html'>HTML</a> <a href='#' id='css'>CSS</a></div>

	<!-- the content div -->
	<div id='content'>
	    <!-- the unordered list where we store the content in list items -->
			<li class='bestof'>Best of September- 10 web development articles and tutorials</li>
			<li class='jquery php'>14 jQuery and non-jQuery Rich Text Editors</li>
			<li class='php'>How to know where your visitors are coming from</li>
			<li class='php'>How speed improving using single quotes instead of double quotes really is</li>
			<li class='jquery html'>Automatic input field focus on page load</li>
			<li class='jquery php'>Checking username availability with ajax using jQuery</li>
			<li class='jquery css html'>Hover effect with jQuery and CSS</li>
			<li class='jquery css html'>Zebra stripes with jQuery and CSS</li>
			<li class='jquery html'>Maxlength for textarea using jQuery</li>



		//when a link in the filters div is clicked...
		$('#filters a').click(function(e){

			//prevent the default behaviour of the link

			//get the id of the clicked link(which is equal to classes of our content
			var filter = $(this).attr('id');

			//show all the list items(this is needed to get the hidden ones shown)
			$('#content ul li').show();

			/*using the :not attribute and the filter class in it we are selecting
			only the list items that don't have that class and hide them '*/
			$('#content ul li:not(.' + filter + ')').hide();



Final Words

That’s it. And this is the easiest way to filter data like this, as far as i know, if you know about an easier way i will be thrilled to hear about it :)

Don’t Forget

If you want you can subscribe to TutsValley RSS Feed or follow us on Twitter to be informed when a new tutorial comes out. Thank you.

Related posts:

  1. Cool navigation menu made with JQuery
  2. Checking username availability with ajax using jQuery
  3. Making A Cool Thumbnail Effect With Zoom And Sliding Captions
  4. Making an infinite JQuery carousel
  5. Making a Cool Spotlight Effect with jQuery

Slobodan Kustrimovic

This author has yet to fill his BIO.

Did you absolutely LOVE this article... share it!


  • Many thanks – excellent straightforward tutorial. If this is typical we’re in for a treat!


  • I’m glad you like it :)

  • Is there a way to only show one class rather than all the classes on load? I tried using the following but it didn’t work. Hopefully it’ll help show what I’m trying to achieve:

    Trying to replace this:
    //show all the list items(this is needed to get the hidden ones shown)
    $(‘#content ul li’).show();

    With this:
    //show only one class on load rather than all classes
    $(‘#content ul .uniqueClass’).show();

    Any help would be greatly appreciated!


    - Heath

  • Try this. After the $(document).ready({ put this:

    $(‘#content ul li:not(.uniqueClass).hide();

    Where uniqueClass is the class you want to show by default.
    Haven’t tested it but should work.

  • Thank’s for this !
    I’m wontering on how simple it is when you know the commands ;)

    I’ve used it for filtering a -Field in order of the value of an other -field .

    $(‘#bdlnd option’).click(function(e){
    var filter = $(this).attr(‘class’);
    $(‘#bez1 option’).show();
    $(‘#bez1 option:not(.’ + filter + ‘)’).hide();


  • Can I use multiple categories of filters on same list?

  • Excellent one…… really nice.

    How can we make it same for Checkboxes instead of anchor tags.

  • Hi! Is there a way to toggle the class of the selected filter to active?

    My button classes are:

    .filters a
    .filters a:hover
    .filters a:active

    Thanks so much!

Leave your own!


freedcamp free project management

Popular Articles

fzilla file hosting