Reset jQuery IsoTope Filters and Sort

Question

I have a number of jquery isotope filters and a sort. All works really nicely, but I would like to create a reset button.

I have tried the following (http://stackoverflow.com/questions/10297558/isotope-reset-all-combination-filters) , but while it does seem to reset the items (on the second click), it does not reset the filter buttons.

Answer 1

I can only assume you mean "it does not reset the appearance of the filter buttons" when writing

[…] it does not reset the filter buttons.

If that is the case, and the appearance of your filter-buttons is controlled by CSS-classes just like in Isotope's examples, you simply have to remove said CSS-class(es) from the filter button elements when a user clicks the "reset"-button.

In the source of e. g. Isotope's 'Combination filters'-demonstration you'll find the following code which handles everything happening when one of the filter-buttons is clicked:

// filter buttons
$('.filter a').click(function(){
  var $this = $(this);
  // don't proceed if already selected
  if ( $this.hasClass('selected') ) {
    return;
  }

  var $optionSet = $this.parents('.option-set');
  // change selected class
  $optionSet.find('.selected').removeClass('selected');
  $this.addClass('selected');

  // store filter value in object
  // i.e. filters.color = 'red'
  var group = $optionSet.attr('data-filter-group');
  filters[ group ] = $this.attr('data-filter-value');
  // convert object into array
  var isoFilters = [];
  for ( var prop in filters ) {
    isoFilters.push( filters[ prop ] )
  }
  var selector = isoFilters.join('');
  $container.isotope({ filter: selector });

  return false;
});

The important code (hopefully) related to your question can be found in these lines:

$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');

• the first line removes all 'selected'-classes from all elements in $optionSet (the latter simply being a set of buttons targeting a single filter-property)
• the second sets the 'selected'-class for the element the user clicked on