Filter object by data attribute and reset filter on each use

Question

I am trying to imitate the filtering functionality of the Isotope pluggin for JQuery as I need to filter images however actually using Isotope causes problems to some parallax scolling elements on the page.

I have written this short JQuery snippet to toggle images that don't have the data attribute data-filter in them. Apart from the fact that the Packery pluggin doesn't re-order the items once the ones that do not match are removed, it works fine.

The problem I have is that I need the filters to reset once another filter link is clicked, as if another filter is clicked then the first filtered elements disappear and all other elements except the filtered ones are returned. I am sure the solution is simple but I have very limited knowledge of JQuery so have no idea how to approach this.

Code

$("#filters a").click(function()    {
        var type = $(this).attr('data-filter');
        $('img').not('[data-filter="'+type+'"]').toggle( 1000 );        
    });

I also have no way of returning all elements to visible state with one link, any help greatly appreciated.

Answer 1

I think that you don't want to use toggle for that functionality. You could probably use specifically hide and show for the different that do or don't fit the filter type. Like this:

$("#filters a").click(function()    {
    var type = $(this).attr('data-filter'),
        $img = $( 'img' );

    $img.filter( '[data-filter="'+type+'"]' ).show( 1000 );
    $img.not( '[data-filter="'+type+'"]' ).hide( 1000 );
});

Then for resetting all filters you could just use a separate event or a condition in the event and just do the following to show all images back:

$img.show( 1000 );

Answer 2

According to jQuery - .toggle(), you can show all elements with toggle(true)

$("#filters a").click(function() {
        var type = $(this).attr('data-filter');
        $('img').toggle(true).not('[data-filter="'+type+'"]').toggle( 1000 );        
});

JSFiddle