filtering with jQuery

Question

See below for scenario. I'm making a directory and I'd like to be able to filter the #apple, #animal, #banana, #beans, #cape, #cat, #dog, #dung items in two ways: by category (.services, .technology, .referral, or .reseller) and by first letter (.a, .b, .c, .d). If I click on #services, it should hide all other classes (.technology, .referral, .reseller) and if I click on #a, it should hide all other items that don't start with the letter "a".

That works just fine alone but where I have trouble is if I click #services, and then I click #a, non-service items show. I don't want that. Instead, I'd like to be able to click #services, then click #a, and only see items with a .service class that start with the letter a; how would that be accomplished?

I'm pretty new to jquery so I apologize for the confusion. Not sure how else to ask this seemingly simple jQuery filtering question. help is MUCH appreciated!

Scenario:

I have the following html:

<div id="container">
<div id="nav">
    <ul>
        <li id="services"><a href="#">Services</a></li>
        <li id="technology"><a href="#">Technology</a></li>
        <li id="referral"><a href="#">Referral</a></li>
        <li id="reseller"><a href="#">Reseller</a></li>
    </ul>
</div>

<div id="abs-filer-nav>
    <a href="#" id="a">A</a>
    <a href="#" id="b">B</a>
    <a href="#" id="c">C</a>
    <a href="#" id="d">D</a>
</div>

<div id = "apple" class="technology"></div>
<div id = "animal" class="services"></div>
<div id = "banana" class="services"></div>
<div id = "beans" class="referral"></div>
<div id = "cape" class="referral"></div>
<div id = "cat" class="reseller"></div>
<div id = "dog" class="reseller">
<div id = "dung" class="technology">

and the following jQuery:

$(document).ready(function() {
    $('#all').addClass("active");
    $('#all').click(function() {
        $('.services, .reseller, .technology,.referral').fadeIn("fast");
        $(this).addClass("active");
        $('#services, #reseller,#technology').removeClass("active");        
    });
    $('#technology').click(function() {
        $('.services, .reseller,.referral').fadeOut("fast");
        $('.technology').fadeIn("fast");
        $(this).addClass("active");
        $(this).addClass("immune")
        $('#services, #reseller,#all,#referral').removeClass("active");
        $('#services_class').toggleHide("fast");
    });
    $('#services').click(function() {
        $('.technology, .reseller,.referral').fadeOut("fast");
        $('#services_class').show("fast");      
        $('.services').fadeIn("fast");
        $(this).addClass("active");
        $('#all, #reseller,#technology,#referral').removeClass("active");   
    });
    $('#reseller').click(function() {
        $('.services, .technology,.referral').fadeOut("fast");
        $('.reseller').fadeIn("fast");          
        $(this).addClass("active");
        $('#services, #all,#technology,#referral').removeClass("active");           
    });     
    $('#referral').click(function() {
        $('.services, .technology,.reseller').fadeOut("fast");
        $('.referral').fadeIn("fast");          
        $(this).addClass("active");
        $('#services, #all,#technology').removeClass("active");         
    });     
    $('#a').click(function() {
        $('.b,.c,.d').fadeOut("fast");
        $('.a').fadeIn("fast");
        $(this).addClass("active");
        $('.b,.c,.d').removeClass("fast");
    })
    $('#b').click(function() {
        $('.a,.c,.d').fadeOut("fast");
        $('.b').fadeIn("fast");
        $('.immune').fadeIn("fast");
        $(this).addClass("active");
        $('.a,.c,.d').removeClass("fast");
    })  
    $('#c').click(function() {
        $('.a,.b,.d').fadeOut("fast");
        $('.c').fadeIn("fast");
        $(this).addClass("active");
        $('.a,.b,.d').removeClass("fast");
    })      
    $('#d').click(function() {
        $('.a,.b,.c').fadeOut("fast");
        $('.d').fadeIn("fast");
        $(this).addClass("active");
        $('.a,.b,.c').removeClass("fast");
    })          
});

Answer 1

It may not be the best implementation, but meets the requirements you listed - http://jsfiddle.net/VbVr6/

*If you were wanting to filter down to the elements that have an 'id' that starts with the letter, here is an example of that: http://jsfiddle.net/VbVr6/1/

<div id="container">
<div id="nav">
    <ul>
        <li id="services"><a href="#">Services</a></li>
        <li id="technology"><a href="#">Technology</a></li>
        <li id="referral"><a href="#">Referral</a></li>
        <li id="reseller"><a href="#">Reseller</a></li>
    </ul>
</div>

<div id="abs-filer-nav">
    <a href="#" id="a">A</a>
    <a href="#" id="b">B</a>
    <a href="#" id="c">C</a>
    <a href="#" id="d">D</a>
</div>

<div id = "apple" class="nav technology d">apple - tech</div>
<div id = "animal" class="nav services a">animal - serv</div>
<div id = "banana" class="nav services b">banana - serv</div>
<div id = "beans" class="nav referral a b">beans - ref</div>
<div id = "cape" class="nav referral c">cape - ref</div>
<div id = "cat" class="nav reseller d">cat - resell</div>
</div>

And the script:

var navFilter;
var letterFilter;

function applyFilter() {
     if (navFilter || letterFilter) {
        // Get a selector of the item you want to show. 
        // If it has a navFilter currently selected, start with that (i.e. .technology)
        // If it has a letter, add that to the selector (i.e. .a).
        // If both filters are present, require both classes (i.e. .technology.a)
        var classes = (navFilter ? "." + navFilter : "") + (letterFilter ? "." + letterFilter : "");
        // Select all .nav elements that don't match our selector and hide them
        $(".nav:not(" + classes + ")").animate({
            height:0,
            opacity:0
        });
        // Select all elements that DO match our selector and show them
        $(classes).animate({
            height:20,
            opacity:1
        });
    }   
}

// When you click on any 'li' element in the #nav element
$("#nav li").click(function (e) {
    // Clear any existing highlight
    $("#nav li").css("background-color", "#ffffff");
    // Highlight the selected item
    $(this).css("background-color", "#cccccc");
    // Update the selected nav filter
    navFilter = this.id;
    // Reapply filters, so it hides/shows elements using the new filter
    applyFilter();
});
// When you click on any 'li' element in the #abs-filer-nav element
$("#abs-filer-nav a").click(function (e) {
    // Highlight the selected item
    $("#abs-filer-nav a").css("background-color", "#ffffff");
    // Highlight the selected item
    $(this).css("background-color", "#cccccc");
    // Update the selected letter filter
    letterFilter = this.id;
    // Reapply filters, so it hides/shows elements using the new filter
    applyFilter();
});

Answer 2

LIVE DEMO

By just wrapping your categories into a parent element ID:

<div id="categories">
   <div id="apple" class="technology">apple</div>
   <div id="animal" class="services">animal</div>
   <!-- ... -->
</div>

All you need:

var $cat = $('#categories > div');

function showCategories( e ) {
  e.preventDefault();
  var id = this.id;
  $cat.hide().filter(id.length>1 ? "."+id : "[id^="+id+"]").show(); 
}

$('#nav li, #abs-filer-nav a').click( showCategories );

Explanation

while the code in general (a part I removed the fade and class stuff) looks trivial,
let's explore the show categories function:

$(                   // Get elements into jQ collection
    elID.length>1 ?  // Is this.id a word (not a single char.) ?
    "."+elID      :  // Than get all classElements with this.id
    "[id^="+elID+"]" // Else get all elements which ID starts with (^) this.id
, $cat)              // Look only inside $('#categories') element