Вариант без jQuery:
<div class="a b">text 1 b</div>
<div class="a b">text 2 b</div>
<div class="a c">text 1 c</div>
<div class="a c">text 2 c</div>
<div class="a c">text 3 c</div>
<div class="a d">text 1 d</div>
<script>
(function(){
function hasClasses(element, classList) {
return classList.every(function(className) {
return element.classList.contains(className);
});
}
var activeFilter = null;
var items = Array.apply(this, document.querySelectorAll('.a'));
var onItemClick = function() {
var classList = Array.apply(this, this.classList);
var filter = classList.join(' ');
var restore = filter === activeFilter;
items.forEach(function(item){
item.style.display = restore || hasClasses(item, classList) ? '' : 'none';
});
activeFilter = restore ? null : filter;
};
items.forEach(function(item){
item.addEventListener('click', onItemClick);
});
})();
</script>
Требует поддержки ES5 и classList!