jQuery addClass example

Change class name on click in jQuery

HTML

<button class="btn-filter" data-filter="foo1">.foo1</button>
<button class="btn-filter" data-filter="foo2">.foo2</button>
<button class="btn-filter" data-filter="foo3">.foo3</button>
<button class="btn-filter" data-filter="all">All</button>

<hr>

<div class="item foo1">foo1</div>
<div class="item foo2">foo2</div>
<div class="item foo3">foo3</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
.item {
  background: lightgray;
  border: 1px solid black;
  margin: 5px auto;
  padding: 5px;
}

JavaScript

function filter (className) {
	var $items = $('.item');
	if (className !== 'all') {
  	$items = $items.filter('.' + className);
    
  }
  $items.toggle();
}

$('.btn-filter').on('click', function (e) {
	var $el = $(e.target);
  var className = $el.data('filter');
  if (className) { filter(className) }
});