I'm almost finish with the sorting list with using Data-id. I have almost everything working right. Just some styling to do in html/css3. I just don't know which tag or css class I need to change to show that it has been deselected on my page. I believe the jQuery is working right.

http://romabio.com/products/ <-- OLD

http://romabio.com/p...cts/index1.html <-- NEW and needs to be fix!

// run this when user clicks on a filter button $filter.on('click', 'button', function() { var $this = $(this), groupBy; // Toggle button on click, we disabled that automatic toggle // because we want to do more than just change the button on click $this.button('toggle'); getClassesFromActiveButtons(); // Disabled all products products.addClass('disabled'); // Cycle through products and enable ones the match the filter buttons _.forEach(products, function(product) { var $p = $(product), isActive = true; // assume product should be active, check the product and see if has  // ALL of the classes for the selected filters  _.forEach(filterOn, function(filter) { console.log('checking ' + $p.text() + ' for ' + filter) // if it's already false, you don't have to check, that's why we check to make // sure it's active to begin with if (isActive && !$p.hasClass(filter)) { isActive = false; } }); // enable link if it's active if (isActive) { $p.removeClass('disabled'); } }); }) function disableAllProducts() { products.addClass('disabled'); } function getClassesFromActiveButtons() { filterOn = _.filter(buttons, function(button) { var $button = $(button); if ($(button).is('.active')) { return $(button).data('filter'); } }).map(function(button) { var $button = $(button); return $(button).data('filter'); }) console.log(filterOn); }