Question

For a page I’m creating which dynamically displays product, I’m needing to create a product filter of sort. Clicking on a li element in the ul#product-filter will show/hide the appropriate div (product category).

See my HTML code:

<ul id="product-filter">
    <li class="cat_1">category 1</li>
    <li class="cat_2">category 2</li>
</ul>

<div id="product-display">
    <div class="cat_1">
        <img src="image1.gif">
    </div>

    <div class="cat_2">
        <img src="image2.gif">
    </div>
</div>

Currently my jQuery solution is:

$('#products-filter li[class^=cat_]').click(function() {
    $('#products-display div[class=' + $(this).attr('class') + ']').fadeToggle();
});

However, this only fadeToggles the selected category (product category div). The client has requested that clicking an initial category (‘li’) would hide all other ‘product category’ divs and display only the selected. Clicking another (‘li’) category would also show this second product div, still showing the previous selected.. etc. Re-clicking this same ‘li’ item would hide the category again.. etc.

A ‘reset’ button would also be ideal.

Any suggestions would be greatly appreciated.

Answer 1

I think this implements the “client requested behavior” of the first click shows only the items clicked on and subsequent clicks just toggle the clicked on items (leaving the others as they were):

var clickOnce = false;
$('#product-filter li').click(function() {
    if (!clickOnce) {
        $('#product-display > div').hide();
        $('#product-display .' + this.className).show();
        clickOnce = true;
    } else {
        $('#product-display .' + this.className).toggle();
    }
});​

Working demo: http://jsfiddle.net/jfriend00/KHeVp/

To just show the clicked on ones and hide all others (a more traditional behavior), you could use this:

$('#product-filter li').click(function() {
    $('#product-display > div').hide();
    $('#product-display .' + this.className).show();
});​

Working Demo: http://jsfiddle.net/jfriend00/Tcjam/

Or with an animation:

$('#product-filter li').click(function() {
    $('#product-display > div:visible').slideUp();
    $('#product-display .' + this.className).stop(true).slideDown();
});​

Working Demo: http://jsfiddle.net/jfriend00/ZThzA/